Module "hooks/useSref"

useSref

• useSref(stateName: string, params?: object, options?: TransitionOptions): LinkProps

• 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 state
  • onClick: a mouse event handler that will active the referenced state

  Example:

  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 onClick handler falls back to native browser behavior (does not initiate a state transition) when:

  • the user Ctrl+Click / Alt+Click / Meta+Click / Shift+Click
  • the underlying tag (e.g.: anchor tag) has a 'target' attribute, such as <a target="_blank">Open in new window</a>
  • preventDefault has been called on the event, e.g.: <a onClick={e => e.preventDefault()}>no-op</a>

  Parameters

  • stateName: string

    The name of the state to link to

  • Default value params: object = {}

    Any parameter values

  • Default value options: TransitionOptions = {}

    Transition options used when the onClick handler fires.

  Returns LinkProps