National Patience Month

    @methodexists/dva-ant-breadcrumbs

    0.1.0 • Public • Published

    dva-ant-breadcrumbs

    Antd’s Breadcrumb component connected to dva router.

    Installation

    npm i @methodexists/dva-ant-breadcrumbs
    

    Usage

    Put <Breadcrumbs /> component inside render method of your route component:

    const UsersPage = ({ routes, params }) => (
      <div>
        <Breadcrumbs routes={routes} params={params} />
      </div>
    );
    

    Zero configuraton

    The component will analyze route’s path and will try to guess the best title for each bread crumb.

    URL Path Guessed titles
    /userProfile userProfile "User Profile"
    /users users "Users"
    /users/ilya users/:username "Users" / "Ilya"
    /users/9jerb users/:id "Users" / "9jerb" (here you’ll need customization)

    Custom static title

    Add title prop to a route and it will be used for bread crumb’s title.

    <Route path="userProfile" title="My Profile" ... />
    

    Custom dynamic title

    Add getTitle prop to calculate bread crumb’s title basing on params from the router and state.

    <Route path=":id" getTitle={(params, state) => state.users[params.id].name} />
    

    Fallbacks

    If getTitle() prop is undefined or returns undefined then use title.
    If title is undefined then guess title from path.

    API

    Routes API

    Prop Type Description
    * path string Route’s path. If undefined, the route will be skipped. Could be param name like :username
    getTitle (params, state) => string Function to generate route’s title basing on params prop from router and current state
    title string Text to use for route’s title

    <Breadcrumbs /> API

    Prop Description
    * routes routes prop provided by router into root route component
    * params params prop provided by router into root route component

    * required

    Also supports Ant Design Breadcrumb component props: prefixCls, separator, itemRender, style, className.

    Contributing

    See CONTRIBUTING.md for how to develop a component.

    Install

    npm i @methodexists/dva-ant-breadcrumbs

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • ffab00
    • oluckyman
    • alexeyme