Installation

npm install react-dev-comps.breadcrumb --save

Usage

You can use BreadCrumb component with 1 required prop.

Other than that, you can customize and extend almost anything that BreadCrumb component provides. Please check API section.

1. BreadCrumb component has 2 required props:

   • steps: An array of object indicates the each step of the BreadCrumb component.

   import BreadCrumb from 'react-dev-comps.breadcrumb';
     import * as React from 'react';
      
   interface Prop {}
   interface State { steps: any[]; }
      
   class MyComponent extends React.Component<Prop, State> {
     constructor(props: Prop) {
       super(props);
       this.state = {
         steps: [
          { name: 'Step 1', url: '/step1', isDisabled: false },
          { name: 'Step 2', url: '/step2', isDisabled: false },
          { name: 'Step 3', url: '/step3', isDisabled: false },
          { name: 'Step 4', url: '/step4', isDisabled: true },
         ]
       };
     }
      
     render() {
       const { steps } = this.state;
       const { history } = this.props; // this history object comes from react-router.
      
       return (
         <div className="body-container">
           <BreadCrumb
             steps={steps}
             history={history} // provide react-router's (or any of your choice) history object to the component
           />
         </div>
       );
     }
      
   }
      
   export default MyComponent;
   

API

react-dev-comps.breadcrumb exposes a React Component which takes the following props:

• steps: An array of object indicates the each step of the BreadCrumb component.

• history: The history object which is going to be passed and used inside BreadCrumb component. This prop is very useful to be used with react-router. You can provide any other history object of your choice in order for the component to navigate through the steps that you provide as url on your steps array.

• onSelection: A callback that will be called when any of the steps has been selected to navigate on.

• stepComponent: A React Child Component that will create the BreadCrumb steps. If this prop hasn't been provided, component itself will display its steps.

• preventDefaultStyles: A boolean determines the default style usage. Defaults to false.

• className: A string that will be added as a class name to the parent element.

License

Licensed under the MIT License, Copyright © 2019-present.

See LICENSE for more information.