router5-breadcrumbs-react
v0.1.17
Published
> Breadcrumbs component, based on router5 and react.js which renders crumbs automatically written in less than 200 lines of code.
Downloads
1
Readme
router5-breadcrumbs-react
Breadcrumbs component, based on router5 and react.js which renders crumbs automatically written in less than 200 lines of code.
Install
yarn add router5-breadcrumbs-react
Features
:paperclip: Microdata and semantics
:earth_asia: Translation support
:hamster: Tiny component (< 200 lines, ~3kb gzipped)
:scissors: Customizable icons
:heart: 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'
{ strokeWidth: string fill: string stroke: string className: any }
Defines which label for root of the trail to display.
iconProps
{ strokeWidth: string fill: string stroke: string className: any }
Parameters, which will be applied to default Home Icon and Arrow Icons
forward
{ from: string // router paths to: string }
Use it if you want to overwrite links assigned by default.
classes
{ activeLink: string // clickable links style currentPage: string // classes for current page's label wrapper: string // <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
{ CustomHomeIcon: React.ReactElement CustomArrowIcon: React.ReactElement }
default =
<></>
Check also
router5-tabs-react
Tiny tabbed navigation component, which renders selected tab in active breadcrumb