How to use custom plugins in react js application

Posted By : Shivam Gupta | 30-Jul-2018

For any language or any application, plugins play the very important role. If any user wants to make an application using react, then the plugin library named react-bootstrap is very important for any user. This library support every required utility like pagination, buttons, dropdown, popover, progress, tooltip, tabs, panel etc. This library is user-friendly.

Implementation of react-bootstrap in react app: -

for implementing react-bootstrap in our application, first, we have to install it in NPM

NPM INSTALL --save react react-dom

npm install --save react react-bootstrap

Modal implementation in reactjs application: -

if any user wants to show any specific or highlighted details, then modal is the best option for this. For the implementation of modal in our application, the following code will be used in HTML and JSX file.

Property Used In Modal Activity:-

1) show: - when a user wants to open their modal then shown property will be used.

2) onHide- A callback function is executed, when any user wants to close modal. In this callback function, a user can perform any action which will happen just after modal closing.

3) bsClass- Callback fired before the modal open.

4) autoFocus - When the auto-focus property is true then it will automatically focus on modal just after modal is opened. Value of autofocus property should be true for screen reader case.

code section: -

    class Modal extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.modalShow = this.modalShow.bind(this);
    this.modalClose = this.modalClose.bind(this);

    this.state = {
      show: false
    };
  }

  modalClose() {
    this.setState({ show: false });
  }

  modalShow() {
    this.setState({ show: true });
  }

  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>
        <p>Modal Experience!</p>

        <Button bsStyle="primary" bsSize="large" onClick={this.modalShow}>
          Modal Open
        </Button>

        <Modal show={this.state.show} onHide={this.modalClose}>
          <Modal.Header closeButton>
            <Modal.Title>this is modal header</Modal.Title>
          </Modal.Header>
          <Modal.Body>
           <p>this is modal body</p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.modalClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

render(<Modal />);

pagination implementation: -

when there are a lot of user records in user or admin or any other section, then pagination is the best solution for handling such type of problems.

code section: -

                <pager>
  <pager.item href="#" previous="">
    ← Previous
  </pager.item>
  <pager.item disabled="disabled" href="#" next="">
    Next →
  </pager.item>
</pager>;