{"id":18584584,"url":"https://github.com/ui-router/sticky-states","last_synced_at":"2025-05-08T23:49:01.377Z","repository":{"id":15889613,"uuid":"75988994","full_name":"ui-router/sticky-states","owner":"ui-router","description":"Sticky states for UI-Router 1.0","archived":false,"fork":false,"pushed_at":"2024-07-15T11:08:46.000Z","size":2423,"stargazers_count":42,"open_issues_count":12,"forks_count":15,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-08T23:48:55.727Z","etag":null,"topics":["plugin","state-tree","sticky-states","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/ui-router.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-09T01:13:14.000Z","updated_at":"2024-07-15T11:08:50.000Z","dependencies_parsed_at":"2024-06-18T17:04:52.654Z","dependency_job_id":"043aff65-bcf0-41a9-a904-079bfd7ab24c","html_url":"https://github.com/ui-router/sticky-states","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsticky-states","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsticky-states/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsticky-states/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsticky-states/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-router","download_url":"https://codeload.github.com/ui-router/sticky-states/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253166479,"owners_count":21864467,"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":["plugin","state-tree","sticky-states","ui-router"],"created_at":"2024-11-07T00:28:03.621Z","updated_at":"2025-05-08T23:49:01.358Z","avatar_url":"https://github.com/ui-router.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sticky States\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/ui-router/sticky-states.svg)](https://greenkeeper.io/)\n\n### Sticky States for UI-Router 1.0 \u0026nbsp;[![Build Status](https://travis-ci.org/ui-router/sticky-states.svg?branch=master)](https://travis-ci.org/ui-router/sticky-states)\n\n## Overview and Use Case\n\n### Sticky States allows two or more trees of states to run concurrently along side each other.\n\nThe initial use case for this functionality is to implement \"tabs\" for application modules.\nUsing Sticky States, a single app can implement one state tree for each tab, and have them operate at the same time, in parallel to each other.\nEach tab is implemented as its own UI-Router state tree.\nWhile one tab is active, the other tab is inactivated, but can be reactivated without losing any work in progress.\n\nFor the tabs use case, Sticky States work best along with [Deep State Redirect](//ui-router.github.io/deep-state-redirect)\n\n### Sticky State Lifecycle\n\n\nA Sticky State is the root of a UI-Router state tree which can continue running even after it is \"exited\".\nThe sticky state (and its children) have a different lifecycle than normal states.\nThe views of a Sticky State (and all activated substates) are retained until one of two things happen:\n\n- The parent of the sticky state is exited\n- The parent of the sticky state is directly activated\n\nIf a sibling of the sticky state (or a child of a sibling) is activated, the sticky state tree will \"inactivate\".\nA transition back to the inactivate state will reactivate it.\n\n\n## Using\n\nSticky states works requires `ui-router-core` 2.0.0 or above.\nRun `npm ls` to check the version of `ui-router-core` included with the UI-Router distribution for your framework\n\n### 1) Add Plugin\n\n#### ng1\n\nIn Angular 1, register a plugin by injecting `$uiRouterProvider` in a `config()` block.\n\n```js\nimport {StickyStatesPlugin} from \"@uirouter/sticky-states\";\n\nangular.module('myapp', ['ui.router']).config(function($uiRouterProvider) {\n  $uiRouterProvider.plugin(StickyStatesPlugin);\n});\n```\n\n#### ng2\n\nIn Angular 2, register a plugin in your `UIRouterConfig` class\n\n```js\nimport {StickyStatesPlugin} from \"@uirouter/sticky-states\";\n\nexport class MyConfig {\n  configure(uiRouter: UIRouter) {\n    uiRouter.plugin(StickyStatesPlugin);\n  }\n}\n```\n\n#### react\n\nIn React, register a plugin after creating your `UIRouterReact` instance.\n\n```js\nimport {StickyStatesPlugin} from \"@uirouter/sticky-states\";\n\nlet router = new UIRouterReact();\nrouter.plugin(StickyStatesPlugin);\n```\n\nOr, if using component bootstrapping, add the plugin in your routerConfig function.\n\n```js\nlet routerConfig = (router) =\u003e router.plugin(StickyStatesPlugin);\n\nreturn \u003cUIRouterReact config={routerConfig}/\u003e;\n```\n\n\n### 2) Mark a state as sticky\n\nThe sticky state's view **must target a named `ui-view`**.\nThe named `ui-view` **must not be shared with other states**.\n\nCreate and target a named ui-view.\n\n```html\n  \u003cui-view name=\"admin\"\u003e\u003c/ui-view\u003e\n```\n  \n```js\nlet adminModule = {\n  name: 'admin',\n  sticky: true,\n  views: {\n    admin: { component: AdminComponent }\n  }\n}\n```\n\nThe AdminComponent should remain active in the `ui-view` named `admin`, even if a sibling state is activated.\n\n### 3) Show/Hide the sticky component\n\nWhen a sticky state is inactive, it's often desired to hide the contents from the UI.\nThis can be achieved using [`StateService.includes`](https://ui-router.github.io/docs/latest/classes/state.stateservice.html#includes).\n\nIn some cases, `ui-sref-active` may also be used to toggle a class on the named `ui-view`.\n\n\n## Example\n\nThese minimal examples show how to get started with sticky states in:\n\n- [AngularJS](https://stackblitz.com/edit/ui-router-angularjs-sticky-states?file=app.js)\n- [Angular](https://stackblitz.com/edit/ui-router-angular-sticky-states?file=app/app.module.ts)\n- [React](https://stackblitz.com/edit/ui-router-react-sticky-states?file=index.js)\n\n## More\n\nThis project was ported from the [UI-Router Extras project](//christopherthielen.github.io/ui-router-extras/) for legacy UI-Router.\nFor more information, see the ui-router extras documentation: http://christopherthielen.github.io/ui-router-extras/#/sticky\n\nTODO: Rewrite docs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-router%2Fsticky-states","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-router%2Fsticky-states","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-router%2Fsticky-states/lists"}