
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@uirouter/sticky-states
Advanced tools
UI-Router Sticky States: Keep states and their components alive while a different state is activated
The initial use case for this functionality is to implement "tabs" for application modules. Using 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. Each tab is implemented as its own UI-Router state tree. While one tab is active, the other tab is inactivated, but can be reactivated without losing any work in progress.
For the tabs use case, Sticky States work best along with Deep State Redirect
A Sticky State is the root of a UI-Router state tree which can continue running even after it is "exited". The sticky state (and its children) have a different lifecycle than normal states. The views of a Sticky State (and all activated substates) are retained until one of two things happen:
If a sibling of the sticky state (or a child of a sibling) is activated, the sticky state tree will "inactivate". A transition back to the inactivate state will reactivate it.
Sticky states works requires ui-router-core
2.0.0 or above.
Run npm ls
to check the version of ui-router-core
included with the UI-Router distribution for your framework
In Angular 1, register a plugin by injecting $uiRouterProvider
in a config()
block.
import {StickyStatesPlugin} from "@uirouter/sticky-states";
angular.module('myapp', ['ui.router']).config(function($uiRouterProvider) {
$uiRouterProvider.plugin(StickyStatesPlugin);
});
In Angular 2, register a plugin in your UIRouterConfig
class
import {StickyStatesPlugin} from "@uirouter/sticky-states";
export class MyConfig {
configure(uiRouter: UIRouter) {
uiRouter.plugin(StickyStatesPlugin);
}
}
In React, register a plugin after creating your UIRouterReact
instance.
import {StickyStatesPlugin} from "@uirouter/sticky-states";
let router = new UIRouterReact();
router.plugin(StickyStatesPlugin);
Or, if using component bootstrapping, add the plugin in your routerConfig function.
let routerConfig = (router) => router.plugin(StickyStatesPlugin);
return <UIRouterReact config={routerConfig}/>;
The sticky state's view must target a named ui-view
.
The named ui-view
must not be shared with other states.
Create and target a named ui-view.
<ui-view name="admin"></ui-view>
let adminModule = {
name: 'admin',
sticky: true,
views: {
admin: { component: AdminComponent }
}
}
The AdminComponent should remain active in the ui-view
named admin
, even if a sibling state is activated.
When a sticky state is inactive, it's often desired to hide the contents from the UI.
This can be achieved using StateService.includes
.
In some cases, ui-sref-active
may also be used to toggle a class on the named ui-view
.
These minimal examples show how to get started with sticky states in:
This project was ported from the UI-Router Extras project for legacy UI-Router. For more information, see the ui-router extras documentation: http://christopherthielen.github.io/ui-router-extras/#/sticky
TODO: Rewrite docs
1.5.1 (2019-10-08)
Compare @uirouter/sticky-states
versions 1.5.0 and 1.5.1
Compare @uirouter/sticky-states
versions 1.4.1 and 1.5.0
reactivating
and to
paths) (3696bf9)<a name="1.4.1"></a>
Compare @uirouter/sticky-states
versions 1.4.0 and 1.4.1
<a name="1.4.0"></a>
Compare @uirouter/sticky-states
versions 1.3.0 and 1.4.0
<a name="1.3.0"></a>
Compare @uirouter/sticky-states
versions 1.2.0 and 1.3.0
<a name="1.2.0"></a>
Compare @uirouter/sticky-states
versions 1.0.0 and 1.2.0
main:
entry (bfe70b5)coreResolcables
onCreate hook (b61a22b)<a name="1.0.0"></a> This is the first release of Sticky States for UI-Router 1.0+
This is a port of UI-Router Extras - Sticky States
This port is mostly compatible with the ui-router extras project of the same name, so use those docs for now.
FAQs
UI-Router Sticky States: Keep states and their components alive while a different state is activated
The npm package @uirouter/sticky-states receives a total of 2,491 weekly downloads. As such, @uirouter/sticky-states popularity was classified as popular.
We found that @uirouter/sticky-states demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.