react-dev-comps.breadcrumb v0.0.2

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.

```js
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.