{"library":"reactstrap","title":"Reactstrap: React Bootstrap Components","description":"Reactstrap offers a comprehensive collection of stateless React components designed to implement Bootstrap 5's user interface framework. The library, currently at stable version 9.2.3 (released September 2024), maintains a release cadence primarily focused on bug fixes and minor feature enhancements, with major versions typically aligning with Bootstrap's own releases. A key differentiator is its complete independence from jQuery and Bootstrap's own JavaScript, relying instead on React's declarative composition model for content rendering through `props.children`. For advanced positioning requirements in components like Tooltips, Popovers, and Dropdowns, Reactstrap integrates Poppers.js via `react-popper`, ensuring robust and accessible UI behavior. The package also ships with full TypeScript type definitions, enhancing developer experience for TypeScript projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install reactstrap"],"cli":null},"imports":["import { Button } from 'reactstrap';","import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';","import { Input } from 'reactstrap';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport 'bootstrap/dist/css/bootstrap.css';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nfunction App() {\n  const [modalOpen, setModalOpen] = useState(false);\n  const toggle = () => setModalOpen(!modalOpen);\n\n  return (\n    <div className=\"App p-4\">\n      <h1>Welcome to Reactstrap!</h1>\n      <Button color=\"primary\" onClick={toggle}>\n        Open Modal\n      </Button>\n      <Modal isOpen={modalOpen} toggle={toggle}>\n        <ModalHeader toggle={toggle}>Modal Title</ModalHeader>\n        <ModalBody>\n          This is a sample modal content. You can put any React components here.\n        </ModalBody>\n        <ModalFooter>\n          <Button color=\"secondary\" onClick={toggle}>Cancel</Button>\n          <Button color=\"primary\" onClick={toggle}>Do Something</Button>\n        </ModalFooter>\n      </Modal>\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);","lang":"typescript","description":"Demonstrates setting up a basic React application with Reactstrap, including importing Bootstrap CSS and using interactive components like Button and Modal.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}