What is difference between reactstrap and react-bootstrap?

Solution 1:

I have been struggling with this myself and it is as @Besart Marku says, highly opinion based.

One thing that did make a diffirence for me is that reactstraps documentation uses state in alot of its code examples:

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalExample; 

vs react-bootstrap uses functions and Hooks:

function MyVerticallyCenteredModal(props) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

function App() {
  const [modalShow, setModalShow] = React.useState(false);

  return (
    <ButtonToolbar>
      <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </ButtonToolbar>
  );
}

render(<App />);

Im not giving an answer saying one of these is better than the other,its a preference and for me personaly I vent with reactstrap since I tend to use classcomponents more than Hooks so having finished examples that I can tweak with minimal effort did the trick.

Solution 2:

They are 2 different libraries but both based on Bootstrap components.

Some little statistics about them https://www.npmtrends.com/react-bootstrap-vs-reactstrap

Solution 3:

Thought I'd add my 2 pence. I came the other way, learning React Native with Android development before moving over to React.

The former method with Reactstrap is closer to how we have done things with Web Development and Bootstrap where as the latter is closer to how I have done things in React Native i.e. component based development.

Its really down to use case both make sense however if you have a dynamic page with lots of moving parts I would suggest using the React-Bootstrap library as the implementation is much closer to the component model and will allow you to make your page elements reusable (not that you can't do that with the former Reactstrap library).

I have gone with Reactstrap for now simply because it offers all of Bootstrap 4 out of the box which is what I need with very little fuss.