A hook that returns the current state and parameter values.
A hook that returns the current state and parameter values.
Each time the current state or parameter values change, the component will re-render with the new values.
Example:
function CurrentState() {
const { state, params } = useCurrentStateAndParams();
return <span>{state.name} ({JSON.stringify(params)})</span>;
}Internal hook to support deep diffing in hook dependencies
Internal hook to support deep diffing in hook dependencies
A hook that returns true if a given state is active.
A hook that returns true if a given state is active.
Example:
function ContactsLabel() {
const isActive = useIsActive('contacts');
return <span className={isActive ? 'active' : 'inactive'}>Contacts></span>
}Example:
function JoeLabel() {
const isActive = useIsActive('contacts.contact', { contactId: 'joe' });
return <span className={isActive ? 'active' : 'inactive'}>Joe></span>
}the name of the state to check. Relative state names such as '.child' are supported. Relative states are resolved relative to the state that rendered the hook.
if present, the hook will only return true if all the provided parameter values match.
when true, the hook returns true only when the state matches exactly. when false, returns true if the state matches, or any child state matches.
A hook that invokes the provided callback whenever the current state changes.
A hook that invokes the provided callback whenever the current state changes.
The callback receives the StateDeclaration and parameter values of the new current state.
Example:
function ShowCurrentState() {
const [routerState, setRouterState] = useState('');
useOnStateChanged((state) => setState(state.name);
return <span>{routerState ? `state changed to ${routerState}` : null}</span>
}a callback that receives the new current state and parameter values
A hook that returns the UIRouter instance
A hook that returns the UIRouter instance
Example:
const FormSubmit() {
const router = useRouter();
const form = useContext(FormFromContext);
function submit() {
validateForm(form)
.then(submitForm)
.then(() => router.stateService.go('home'));
}
return <button onClick={submit}>Submit form</button>;
}A hook to create a link to a state.
A hook to create a link to a state.
This hook returns link (anchor tag) props for a given state reference. The resulting props can be spread onto an anchor tag.
The props returned from this hook are:
href: the browser URL of the referenced stateonClick: a mouse event handler that will active the referenced stateExample:
function HomeLink() {
const sref = useSref('home');
return <a {...sref}>Home</a>
}Example:
function UserLink({ userId, username }) {
const sref = useSref('users.user', { userId: userId });
return <a {...sref}>{username}</a>
}The name of the state to link to
Any parameter values
Transition options used when the onClick handler fires.
A hook to create a link to a state and track its active status.
A hook to create a link to a state and track its active status.
This hook returns link (anchor tag) props for a given state reference.
The resulting props can be spread onto an anchor tag.
If the referenced state (and params) is active, then the activeClass is returned as the className prop.
The props returned from this hook are:
href: the browser URL of the referenced stateonClick: a mouse event handler that will active the referenced stateclassName: the activeClass parameter when the state (or any child state) is active, otherwise an empty stringExample:
function HomeLink() {
const sref = useSref('home', null, 'active');
return <a {...sref}>Home</a>
}Example:
function UserLink({ userId, username }) {
const sref = useSref('users.user', { userId: userId }, 'active');
return <a {...sref}>{username}</a>
}This hook is a variation of the useSref hook.
The name of the state to link to
Any parameter values
A css class string to use when the state is active
Transition options used when the onClick handler fires.
A hook to create a link to a state and track its active status.
A hook to create a link to a state and track its active status.
This hook returns link (anchor tag) props for a given state reference.
The resulting props can be spread onto an anchor tag.
If the referenced state (and params) is active, then the activeClass is returned as the className prop.
The props returned from this hook are:
href: the browser URL of the referenced stateonClick: a mouse event handler that will active the referenced stateclassName: the activeClass parameter when the state is active, otherwise an empty stringExample:
function HomeLink() {
const sref = useSref('home', null, 'active');
return <a {...sref}>Home</a>
}Example:
function UserLink({ userId, username }) {
const sref = useSref('users.user', { userId: userId }, 'active');
return <a {...sref}>{username}</a>
}This hook is a variation of the useSrefActive hook.
This variation does not render the activeClass if a child state is active.
The name of the state to link to
Any parameter values
A css class string to use when the state is active
Transition options used when the onClick handler fires.
Returns a stabilized callback reference which delegates to the most recent unstable callback
Returns a stabilized callback reference which delegates to the most recent unstable callback
This is similar to useCallback, but allows unstableCallback to access the most recent values from the closure. This can be useful if the callback is being stored long term, such as in the Transition Hook registry.
Example:
const latestValueFromProps = props.value
const transitionHook = useStableCallback(() => console.log(latestValueFromProps));
useEffect(() => {
const deregister = transitionService.onBefore({ exiting: 'someState' }, transitionHook);
return () => deregister();
}, []);A React hook that registers a UI-Router Transition Hook and manages its lifecycle.
A React hook that registers a UI-Router Transition Hook and manages its lifecycle.
This hook can be used to register a Transition Hook with UI-Router from a component. The Transition Hook will be automatically de-registered when the component unmounts. The Transition Hook will receive the current Transition object (like all Transition Hooks).
Example:
function DisallowExitUntilVerified() {
const [allowExit, setAllowExit] = useState(false);
useTransitionHook('onBefore', {}, transition => {
return allowExit;
});
if (canExit) {
return <span>OK, the current state can be exited!</span>
}
return (
<div>
The current state can't be exited until you click this button:
<button onClick={() => setAllowExit(true)}>Allow Exit</button>
</div>
)
}the name of the lifecycle event
the transition criteria object
the callback to invoke
transition hook options
Generated using TypeDoc
UI-Router React Hooks
This is a collection of react hooks that can be used in functional components.