@storybook/router

  • Version 8.1.4
  • Published
  • 83.7 kB
  • 3 dependencies
  • MIT license

Install

npm i @storybook/router
yarn add @storybook/router
pnpm add @storybook/router

Overview

Core Storybook Router

Index

Variables

variable BaseLocationProvider

const BaseLocationProvider: ({
basename: basenameProp,
children,
location: locationProp,
navigationType,
navigator,
static: staticProp,
}: RouterProps) => any;

    variable DEEPLY_EQUAL

    const DEEPLY_EQUAL: Symbol;
      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 }?: NavigateOptions
                      ) => void;

                        Interfaces

                        interface LinkProps

                        interface LinkProps {}

                          property children

                          children: ReactNode;

                            property to

                            to: string;

                              interface Other

                              interface Other extends StoryData {}

                                property path

                                path: string;

                                  property singleStory

                                  singleStory?: boolean;

                                    interface StoryData

                                    interface StoryData {}

                                      property refId

                                      refId?: string;

                                        property storyId

                                        storyId?: string;

                                          property viewMode

                                          viewMode?: string;

                                            Type Aliases

                                            type NavigateFunction = (to: To | number, options?: NavigateOptions) => void;
                                              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 (8)

                                                            Peer Dependencies (0)

                                                            No peer dependencies.

                                                            Badge

                                                            To add a badge like this onejsDocs.io badgeto 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
                                                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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>