A JavaScript library that transitions between static HTML pages on navigation; no app server required.
Clone or download
ssorallen Rebuild after reverting to React v15
Use the same version of React as htmltojsx so two versions don't get
bundled.
Latest commit defb332 Dec 13, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src Switch to @babel/standalone for compiling Dec 13, 2017
views I tweet no more 🦉 Dec 13, 2017
.gitignore Build Reactize with Webpack, manage deps with NPM Jan 5, 2015
.ruby-version Upgrade to Ruby 2.2.2 for demo site Sep 15, 2015
Gemfile
Gemfile.lock Upgrade rack to address security vulnerability Dec 13, 2017
Gulpfile.js Use dist version of Turbolinks Nov 21, 2016
LICENSE
Procfile Re-add demo site until it has a new home Sep 15, 2015
README.md
app.rb Re-add demo site until it has a new home Sep 15, 2015
config.ru
package.json Revert "Upgrade React to v16" Dec 13, 2017
webpack.config.js Rename `Reactize` object and file to match repo May 3, 2015
yarn.lock Revert "Upgrade React to v16" Dec 13, 2017

README.md

TurboReact

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 the <head> of every document on your site.

Ruby on Rails

  1. Add the turbo_react-rails gem to your Gemfile:

    gem 'turbo_react-rails'
    
  2. Install the updated set of gems:

    $ bundle install
  3. 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

  1. Get turbo-react via NPM or download the latest release from GitHub:

    $ yarn install turbo-react

    or

    $ curl https://raw.githubusercontent.com/ssorallen/turbo-react/v0.9.0/public/dist/turbo-react.min.js
  2. Include turbo-react in the <head> of each page of the site after Turbolinks:

    <!DOCTYPE html>
    <html>
      <head>
        ...
        <script src="path/to/turbolinks.js"></script>
        <script src="path/to/turbo-react.min.js"></script>
      </head>
      <body>
        ...
      </body>
    </html>

Opting out of Turbolinks & TurboReact

Add a data-no-turbolink attribute to any link that should load normally without being intercepted by Turbolinks and TurboReact. This feature is inherited from TurboReacts's use of Turbolinks.

<a href="/foo/bar.html" data-no-turbolink>
  Skip Turbolinks and TurboReact
</a>

Examples

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 <head>, navigating between the pages will transition between the background colors because TurboReact will add and remove the class names rather than start a new document.

/* style.css */

body {
  height: 100%;
  margin: 0;
  transition: background-color 0.5s;
  width: 100%;
}

.bg-skyblue {
  background-color: skyblue;
}

.bg-yellow {
  background-color: yellow;
}
<!-- page1.html -->

<body class="bg-skyblue">
  <a href="page2.html">Page 2</a>
</body>
<!-- page2.html -->

<body class="bg-yellow">
  <a href="page1.html">Page 1</a>
</body>

How it Works

Demo: https://turbo-react.herokuapp.com/

"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.

The Code

TurboReact turns the <body> into a React element and re-renders it after Turbolinks intercepts link navigations via XMLHttpRequest: turbo-react.js

Running locally

  1. Clone this repo

     $ git clone https://github.com/ssorallen/turbo-react.git
    
  2. Install dependencies

     $ bundle install
     $ yarn install
    
  3. Run the server and watch JS changes

     $ bundle exec unicorn
     $ yarn watch
    
  4. Visit the app: http://localhost:9292