{"id":20824792,"url":"https://github.com/react-dev-james/ui-and-react-router","last_synced_at":"2025-03-12T07:14:51.388Z","repository":{"id":206158856,"uuid":"117066456","full_name":"react-dev-james/UI-and-React-Router","owner":"react-dev-james","description":null,"archived":false,"fork":false,"pushed_at":"2018-04-02T02:02:01.000Z","size":289,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-18T17:25:00.786Z","etag":null,"topics":["javascript","react","spa","typescript","ui-router"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-dev-james.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,"governance":null}},"created_at":"2018-01-11T07:35:51.000Z","updated_at":"2019-01-31T14:27:52.000Z","dependencies_parsed_at":"2023-11-08T10:33:00.074Z","dependency_job_id":null,"html_url":"https://github.com/react-dev-james/UI-and-React-Router","commit_stats":null,"previous_names":["react-dev-james/ui-and-react-router"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dev-james%2FUI-and-React-Router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dev-james%2FUI-and-React-Router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dev-james%2FUI-and-React-Router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dev-james%2FUI-and-React-Router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-dev-james","download_url":"https://codeload.github.com/react-dev-james/UI-and-React-Router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243172144,"owners_count":20247887,"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","spa","typescript","ui-router"],"created_at":"2024-11-17T22:23:44.704Z","updated_at":"2025-03-12T07:14:51.372Z","avatar_url":"https://github.com/react-dev-james.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://rawgit.com/ui-router/react/master/logo/logo.png\" height=\"150\"/\u003e\n  \u003ch1\u003eUI-Router-React\u003c/h1\u003e\n  \u003ca href=\"https://travis-ci.org/ui-router/react\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/ui-router/react/master.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/@uirouter/react\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@uirouter/react.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://greenkeeper.io/\"\u003e\n    \u003cimg src=\"https://badges.greenkeeper.io/ui-router/react.svg?style=flat-square\" alt=\"Greenkeeper badge\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\nUI-Router provides extremely flexible, state based routing to the [React](https://facebook.github.io/react/) ecosystem.\n\nRouting frameworks for SPAs update the browser's URL as the user navigates through the app.  Conversely, this allows changes to the browser's URL to drive navigation through the app, thus allowing the user to create a bookmark to a location deep within the SPA.\n\nUI-Router applications are modeled as a hierarchical tree of states. UI-Router provides a [*state machine*](https://en.wikipedia.org/wiki/Finite-state_machine) to manage the transitions between those application states in a transaction-like manner.\n\n## Getting started\nThe UI-Router package is distributed using [npm](https://www.npmjs.com/), the node package manager.\n\n```\nyarn add @uirouter/react\n```\n\nImport `UIRouter` into your project, define some states and you're good to go!\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {UIRouter, UIView, pushStateLocationPlugin} from '@uirouter/react';\nimport Home from './components/Home';\n\n// define your states\nconst states = [{\n  name: 'home',\n  url: '/home',\n  component: Home\n}];\n\n// select your plugins\nconst plugins = [\n  pushStateLocationPlugin\n];\n\nReactDOM.render(\n  \u003cUIRouter plugins={plugins} states={states}\u003e\n    \u003cUIView/\u003e\n  \u003c/UIRouter\u003e,\n  document.getElementById('root')\n);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-dev-james%2Fui-and-react-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-dev-james%2Fui-and-react-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-dev-james%2Fui-and-react-router/lists"}