@storybook/router
- Version 7.5.3
- Published
- 83.8 kB
- 3 dependencies
- MIT license
Install
npm i @storybook/router
yarn add @storybook/router
pnpm add @storybook/router
Overview
Core Storybook Router
Index
Variables
Functions
Interfaces
Type Aliases
Namespaces
Variables
variable BaseLocationProvider
const BaseLocationProvider: ({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp,}: RouterProps) => any;
variable DEEPLY_EQUAL
const DEEPLY_EQUAL: Symbol;
variable Link
const Link: { ({ to, children, ...rest }: LinkProps): React__default.JSX.Element; displayName: string;};
A component that will navigate to a new location/path when clicked
variable Location
const Location: { ({ children }: LocationProps): React__default.JSX.Element; displayName: string;};
A render-prop component where children is called with a location and will be called whenever it changes when it changes
variable LocationProvider
const LocationProvider: ({ basename, children, window,}: BrowserRouterProps) => JSX.Element;
Functions
function BrowserRouter
BrowserRouter: ({ basename, children, window,}: BrowserRouterProps) => JSX.Element;
A for use in web browsers. Provides the cleanest URLs.
function buildArgsParam
buildArgsParam: (initialArgs: Args | undefined, args: Args) => string;
function deepDiff
deepDiff: (value: any, update: any) => any;
function getMatch
getMatch: ( current: string, target: string | RegExp, startsWith?: any) => Match | null;
function Match
Match: typeof Match;
A render-prop component for rendering when a certain path is hit. It's immensely similar to
Location
but it receives an addition data property:match
. match has a truthy value when the path is hit.
function parsePath
parsePath: (path: string | undefined) => StoryData;
function queryFromLocation
queryFromLocation: (location: Partial<Location>) => Query;
function queryFromString
queryFromString: (s?: string) => Query;
function Route
Route: typeof Route;
A component to conditionally render children based on matching a target path
function Router
Router: ({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp,}: RouterProps) => React.ReactElement | null;
Provides location context for the rest of the app.
Note: You usually won't render a directly. Instead, you'll render a router that is more specific to your environment such as a in web browsers or a for server rendering.
See Also
https://reactrouter.com/docs/en/v6/api#router
function stringifyQuery
stringifyQuery: (query: Query) => string;
function useNavigate
useNavigate: () => (to: To | number, { plain, ...options }?: any) => void;
Interfaces
interface LinkProps
interface LinkProps {}
interface Other
interface Other extends StoryData {}
property path
path: string;
property singleStory
singleStory?: boolean;
Type Aliases
type NavigateFunction
type NavigateFunction = (to: To | number, options?: NavigateOptions) => void;
type NavigateOptions
type NavigateOptions = NavigateOptions$1 & { plain?: boolean;};
type RenderData
type RenderData = Pick<RouterData, 'location'> & Other;
type RouterData
type RouterData = { location: Partial<Location$1>; navigate: NavigateFunction;} & Other;
Namespaces
namespace Match
namespace Match {}
variable displayName
var displayName: string;
namespace Route
namespace Route {}
variable displayName
var displayName: string;
Package Files (2)
Dependencies (3)
Dev Dependencies (6)
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/router
.
- Markdown[](https://www.jsdocs.io/package/@storybook/router)
- HTML<a href="https://www.jsdocs.io/package/@storybook/router"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2045 ms. - Missing or incorrect documentation? Open an issue for this package.