react-dev-comps.breadcrumb
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

React BreadCrumb Component for Accessible Rich Internet Applications.

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.

Readme

Keywords

none

Package Sidebar

Install

npm i react-dev-comps.breadcrumb

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

18.8 kB

Total Files

10

Last publish

Collaborators

  • alisait