{"library":"react-bootstrap","title":"React-Bootstrap Components","description":"React-Bootstrap is a complete re-implementation of the Bootstrap 5 components using React, removing the need for jQuery. It provides a set of accessible and customizable React components that mirror Bootstrap's visual style and functionality. The current stable version is 2.10.10, with active development on a new major version (v3.0.0-beta.x) that introduces further breaking changes and improvements like enhanced ESM support. This library is a popular choice for developers who want to leverage Bootstrap's extensive styling framework within a React application without the performance overhead or potential conflicts of integrating traditional Bootstrap's JavaScript. Releases are frequent for both maintenance and beta branches, ensuring timely bug fixes and new features.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-bootstrap"],"cli":null},"imports":["import Button from 'react-bootstrap/Button';","import Modal from 'react-bootstrap/Modal';","import Navbar from 'react-bootstrap/Navbar';","import Form from 'react-bootstrap/Form';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Modal from 'react-bootstrap/Modal';\nimport Form from 'react-bootstrap/Form';\nimport Container from 'react-bootstrap/Container';\n\nfunction MyFormModal() {\n  const [show, setShow] = useState(false);\n  const handleClose = () => setShow(false);\n  const handleShow = () => setShow(true);\n\n  const handleSubmit = (event: React.FormEvent) => {\n    event.preventDefault();\n    console.log('Form submitted!');\n    handleClose();\n  };\n\n  return (\n    <Container className=\"p-4\">\n      <Button variant=\"primary\" onClick={handleShow}>\n        Launch demo modal\n      </Button>\n\n      <Modal show={show} onHide={handleClose}>\n        <Modal.Header closeButton>\n          <Modal.Title>Login</Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <Form onSubmit={handleSubmit}>\n            <Form.Group className=\"mb-3\" controlId=\"formBasicEmail\">\n              <Form.Label>Email address</Form.Label>\n              <Form.Control type=\"email\" placeholder=\"Enter email\" />\n              <Form.Text className=\"text-muted\">\n                We'll never share your email with anyone else.\n              </Form.Text>\n            </Form.Group>\n\n            <Form.Group className=\"mb-3\" controlId=\"formBasicPassword\">\n              <Form.Label>Password</Form.Label>\n              <Form.Control type=\"password\" placeholder=\"Password\" />\n            </Form.Group>\n            <Button variant=\"secondary\" onClick={handleClose} className=\"me-2\">\n              Close\n            </Button>\n            <Button variant=\"primary\" type=\"submit\">\n              Submit\n            </Button>\n          </Form>\n        </Modal.Body>\n      </Modal>\n    </Container>\n  );\n}\n\nexport default MyFormModal;","lang":"typescript","description":"Demonstrates a basic React-Bootstrap setup with a button that opens a modal containing a form, showcasing component imports and state management.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}