TurboReact applies only the differences between two HTML pages when navigating with links rather than create a new document, which enables CSS transitions between pages without needing a server.
Installation & Usage
TurboReact is a plugin for Turbolinks,
which means Turbolinks is required. Include both Turbolinks and TurboReact in
<head> of every document on your site.
Ruby on Rails
turbo_react-railsgem to your Gemfile:
Install the updated set of gems:$ bundle install
Require the "turbo-react" library after "turbolinks" on every page, for example in "application.js" if it is on every page://= require turbolinks//= require turbo-react
Plain HTML and Other Frameworks
Get turbo-react via NPM or download the latest release from GitHub:$ npm install turbo-react
or$ curl https://raw.githubusercontent.com/ssorallen/turbo-react/tree/v0.8.0/public/dist/turbo-react.min.js
Include turbo-react in the
<head>of each page of the site after Turbolinks:......
Opting out of Turbolinks & TurboReact
to any link that should load normally without being intercepted by Turbolinks
and TurboReact. This feature is inherited from TurboReacts's use of Turbolinks.
Skip Turbolinks and TurboReact
Transitioning Background Colors
Navigating between page1 and page2 shows a skyblue background and a yellow
background that changes at once. After putting TurboReact in the
navigating between the pages will transition between the background colors
because TurboReact will add and remove the class names rather than start a new
/* style.css */
<!-- page1.html -->Page 2
<!-- page2.html -->Page 1
How it Works
"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.
The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.
With Turbolinks alone, the entire
<body> would be replaced, and transitions
would not happen. In this little demo though, React adds and removes
classes and text, and the attribute changes are animated with CSS transitions.
The DOM is otherwise left in tact.
TurboReact turns the
<body> into a React element and re-renders it after
Turbolinks intercepts link navigations via XMLHttpRequest:
Clone this repo
$ git clone https://github.com/ssorallen/turbo-react.git
$ bundle install $ npm install
Run the server and watch JS changes
$ bundle exec unicorn $ npm run-script watch
Visit the app: http://localhost:9292
Tweet at me: @ssorallen