Streaming live at 10am (PST)

Building react components using webflow. How to get webflow to re-initialize on route change


#1

From this post:
http://forum.webflow.com/t/css-file-load-order-in-meteor/4131/6

it says:

Whenever you are rendering a page that contains webflow components (slider, navbar, etc), you will need to initialize them. On typical sites, this happens in the jQuery.ready handler. However, in single-page apps the HTML is being built dynamically.

We've added a method to manually invoke the ready handler on all components. This should be called after your HTML is inserted into the document.

Webflow.ready();
Once the elements are initialized they should behave as they normally would in a webflow site.

Just before the route changes in your app, you will want to prevent those components from updating. You can do this by calling the destroy method.

Webflow.destroy();
Once the route has changed, you can call ready() again, and the cycle starts anew.

I am trying to get webflow to re-initialize after a route change, but I am having some trouble... has anyone else had any experience getting webflow to work inside single page apps using react.js ?

I've been able to get webflow to load and work the first time using onLoad in the route, but when the route changes, the menu no longer works... I've tried invoking Webflow.destroy(); just before the route changes and then invoking Webflow.ready(); when it has changed but It doesn't seem to be working.

If I run Webflow.ready(); in the console it starts working again..

I think it is just my lack of react knowledge, wondering if anyone else has worked with webflow inside a react.js project.

any ideas?

I can share my codebase so far if someone could help.


#2

I finally got it to work... using a set timeout of 1ms to re-initialize webflow on page change

function initiateWebflow() {
  // Webflow should load accross the app
	//Include only the parts we need from jQuery
	//http://alexomara.com/blog/webpack-and-jquery-include-only-the-parts-you-need/
	var $ = require('jquery/src/core');
	//Include all of jquery for now until we can figure out what we can remove / exclude
	require('jquery/src/jquery');
	require('imports?$=jquery!./ta-intranet.js');
  setTimeout(function(){ $(Webflow.ready); }, 1);
}

function reInitiateWebflow() {
  $(Webflow.destroy);
}

export default (
  <Route path="/" component={App}>
    <IndexRoute component={LoginPage} />
    <Route path="dashboard" component={Dashboard} onEnter={initiateWebflow} onLeave={reInitiateWebflow} />
    <Route path="about" component={AboutPage} onEnter={initiateWebflow} onLeave={reInitiateWebflow} />
    <Route path="style-guide" component={StyleGuide} onEnter={initiateWebflow} onLeave={reInitiateWebflow} />
    <Route path="hr" component={HR} onEnter={initiateWebflow} onLeave={reInitiateWebflow} />
  </Route>
);

#3

Hi I tried to replicate this and could not figure out how to get it working? I am using react and meteor.


#4