router5-breadcrumbs-react

0.1.17 • Public • Published

router5-breadcrumbs-react

Breadcrumbs component, based on router5 and react.js which renders crumbs automatically written in less than 200 lines of code.

React breadcrumbs component download

NPM PRs Welcome npm

Install

yarn add router5-breadcrumbs-react

Features

📎 Microdata and semantics
🌏 Translation support
🐹 Tiny component (< 200 lines, ~3kb gzipped)
✂️ Customizable icons
❤️ Tailwind default styles

Breadcrumbs usage

import Breadcrumbs from 'router5-breadcrumbs-react'
 
export const Page = () => {
  return (
    <>
      <Breadcrumbs />
    </>
  )
}

Including breadcrumbs tag into page will automatically render trail to current page based on it's path. It could be something like: "user > user-profile". You can utilize it by using localization files, just add following to your json with translations:

{
  "user": "User",
  "user-profile": "Profile"
}

Or you can specify crumbs right in your router5 route files: Tree structure also will work in the same way - just add "crumb" key to each children. Each hierarchical link will be passed translated if translation function is specified. See description of t props

export const routes = [
  { name: 'user', path: '/user', crumb: 'User' },
  { name: 'user.profile', path: '/profile', crumb: 'Profile' },
]

Props

got

{[index: number]: string | React.ReactElement}

export const Example = () => {
  return <Breadcrumbs got={{ 0: product_title }} />
}

Allows to pass dynamic value resulted from fetch request to server. Starts from 0, root crumb not being count in.

children

string | React.ReactElement
default = undefined

export const Example = () => {
  return <Breadcrumbs>{product_title}</Breadcrumbs>
}

Allows to rewrite current page's link with dynamic value.

hide

Array<string> default = undefined

In some cases you would prefer to hide certain crumbs. For example if you have duplicated nodes in your route tree. Or in case when one view being returned for two different routes (for example if you using router5-tabs-react with redirect to *.tabs parameter)

export const Example = () => {
  return <Breadcrumbs hide={['route.names', 'to.hide']} />
}

t

function
default = (text: string) => text

To enable translation just pass translation function to component:

import { useTranslation } from 'react-i18next'
 
export const Example = () => {
  const { t } = useTranslation()
  return <Breadcrumbs t={t} />
}

homeRouteName

string default = 'home'

Name of route node which will be assigned to Home crumb

homeRouteLabel

string default = 'Home'

{
  strokeWidthstring
  fillstring
  strokestring
  classNameany
}

Defines which label for root of the trail to display.

iconProps

{
  strokeWidthstring
  fillstring
  strokestring
  classNameany
}

Parameters, which will be applied to default Home Icon and Arrow Icons

forward

{
  fromstring // router paths
  tostring
}

Use it if you want to overwrite links assigned by default.

classes

{
  activeLinkstring // clickable links style
  currentPagestring // classes for current page's label
  wrapperstring // <ol></ol> tag around trails
}

default =

{
  activeLink = 'flex items-baseline text-blue-700 hover:underline mx-2',
  currentPage = 'text-gray-500 ml-2',
  wrapper = 'flex items-baseline text-xl my-10 whitespace-no-wrap',
}

Classnames for HTML elements.

icons

{
  CustomHomeIconReact.ReactElement
  CustomArrowIconReact.ReactElement
}

default = <></>

Check also

router5-tabs-react

https://github.com/thousandsofraccoons/router5-tabs-react

Tiny tabbed navigation component, which renders selected tab in active breadcrumb

Acknowledgements

Dee Money
Dee Money

License

MIT © https://github.com/thousandsofraccoons

Readme

Keywords

none

Package Sidebar

Install

npm i router5-breadcrumbs-react

Weekly Downloads

1

Version

0.1.17

License

MIT

Unpacked Size

252 kB

Total Files

12

Last publish

Collaborators

  • thousandsofraccoons