{"id":13400869,"url":"https://github.com/ssorallen/turbo-react","last_synced_at":"2025-03-14T06:31:58.933Z","repository":{"id":10559429,"uuid":"12761192","full_name":"ssorallen/turbo-react","owner":"ssorallen","description":"A JavaScript library that transitions between static HTML pages on navigation; no app server required.","archived":false,"fork":false,"pushed_at":"2017-12-13T13:49:10.000Z","size":3293,"stargazers_count":274,"open_issues_count":7,"forks_count":16,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-09-26T14:19:04.294Z","etag":null,"topics":["javascript","react","turbolinks"],"latest_commit_sha":null,"homepage":"https://turbo-react.herokuapp.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ssorallen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-11T16:21:06.000Z","updated_at":"2024-02-15T15:41:37.000Z","dependencies_parsed_at":"2022-09-10T08:21:59.778Z","dependency_job_id":null,"html_url":"https://github.com/ssorallen/turbo-react","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Fturbo-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Fturbo-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Fturbo-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Fturbo-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ssorallen","download_url":"https://codeload.github.com/ssorallen/turbo-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243537949,"owners_count":20307098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","turbolinks"],"created_at":"2024-07-30T19:00:56.499Z","updated_at":"2025-03-14T06:31:58.926Z","avatar_url":"https://github.com/ssorallen.png","language":"HTML","funding_links":[],"categories":["Uncategorized","Awesome React","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools"],"readme":"# TurboReact\n\nTurboReact applies only the differences between two HTML pages when navigating\nwith links rather than create a new document, which enables CSS transitions\nbetween pages without needing a server.\n\n## Installation \u0026 Usage\n\nTurboReact is a plugin for [Turbolinks](https://github.com/rails/turbolinks),\nwhich means Turbolinks is required. Include both Turbolinks and TurboReact in\nthe `\u003chead\u003e` of every document on your site.\n\n### Ruby on Rails\n\n1. Add the [`turbo_react-rails`](https://github.com/ssorallen/turbo_react-rails)\n   gem to your Gemfile:\n\n    ```\n    gem 'turbo_react-rails'\n    ```\n\n2. Install the updated set of gems:\n\n    ```sh\n    $ bundle install\n    ```\n\n3. Require the \"turbo-react\" library after \"turbolinks\" on every page, for\n   example in \"application.js\" if it is on every page:\n\n    ```js\n    //= require turbolinks\n    //= require turbo-react\n    ```\n\n### Plain HTML and Other Frameworks\n\n1. Get turbo-react via NPM or download the latest release from GitHub:\n\n    ```sh\n    $ yarn install turbo-react\n    ```\n\n   or\n\n    ```sh\n    $ curl https://raw.githubusercontent.com/ssorallen/turbo-react/v0.9.0/public/dist/turbo-react.min.js\n    ```\n\n2. Include turbo-react in the `\u003chead\u003e` of each page of the site after\n   Turbolinks:\n\n    ```html\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\n        ...\n        \u003cscript src=\"path/to/turbolinks.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"path/to/turbo-react.min.js\"\u003e\u003c/script\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ...\n      \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n\n### Opting out of Turbolinks \u0026 TurboReact\n\nAdd a\n[`data-no-turbolink` attribute](https://github.com/rails/turbolinks#opting-out-of-turbolinks)\nto any link that should load normally without being intercepted by Turbolinks\nand TurboReact. This feature is inherited from TurboReacts's use of Turbolinks.\n\n```html\n\u003ca href=\"/foo/bar.html\" data-no-turbolink\u003e\n  Skip Turbolinks and TurboReact\n\u003c/a\u003e\n```\n\n## Examples\n\n### Transitioning Background Colors\n\nNavigating between page1 and page2 shows a skyblue background and a yellow\nbackground that changes at once. After putting TurboReact in the `\u003chead\u003e`,\nnavigating between the pages will transition between the background colors\nbecause TurboReact will add and remove the class names rather than start a new\ndocument.\n\n```css\n/* style.css */\n\nbody {\n  height: 100%;\n  margin: 0;\n  transition: background-color 0.5s;\n  width: 100%;\n}\n\n.bg-skyblue {\n  background-color: skyblue;\n}\n\n.bg-yellow {\n  background-color: yellow;\n}\n```\n\n```html\n\u003c!-- page1.html --\u003e\n\n\u003cbody class=\"bg-skyblue\"\u003e\n  \u003ca href=\"page2.html\"\u003ePage 2\u003c/a\u003e\n\u003c/body\u003e\n```\n\n```html\n\u003c!-- page2.html --\u003e\n\n\u003cbody class=\"bg-yellow\"\u003e\n  \u003ca href=\"page1.html\"\u003ePage 1\u003c/a\u003e\n\u003c/body\u003e\n```\n\n### How it Works\n\n**Demo:** https://turbo-react.herokuapp.com/\n\n\"Re-request this page\" is just a link to the current page. When you click it,\nTurbolinks intercepts the GET request and fetchs the full page via XHR.\n\nThe panel is rendered with a random panel- class on each request,\nand the progress bar gets a random widthX class.\n\nWith Turbolinks alone, the entire `\u003cbody\u003e` would be replaced, and transitions\nwould not happen. In this little demo though, React adds and removes\nclasses and text, and the attribute changes are animated with CSS transitions.\nThe DOM is otherwise left in tact.\n\n### The Code\n\nTurboReact turns the `\u003cbody\u003e` into a React element and re-renders it after\nTurbolinks intercepts link navigations via XMLHttpRequest:\n[turbo-react.js](https://github.com/ssorallen/turbo-react/blob/master/src/turbo-react.js)\n\n#### Running locally\n\n1. Clone this repo\n\n        $ git clone https://github.com/ssorallen/turbo-react.git\n\n2. Install dependencies\n\n        $ bundle install\n        $ yarn install\n\n3. Run the server and watch JS changes\n\n        $ bundle exec unicorn\n        $ yarn watch\n\n4. Visit the app: [http://localhost:9292](http://localhost:9292)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssorallen%2Fturbo-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fssorallen%2Fturbo-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssorallen%2Fturbo-react/lists"}