Socket
Socket
Sign inDemoInstall

reactstrap

Package Overview
Dependencies
Maintainers
7
Versions
171
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reactstrap

React Bootstrap components


Version published
Weekly downloads
454K
increased by0.45%
Maintainers
7
Weekly downloads
 
Created

What is reactstrap?

Reactstrap is a popular library that provides Bootstrap 4 components for React applications. It allows developers to use Bootstrap's powerful and responsive design system within their React projects, making it easier to create visually appealing and functional user interfaces.

What are reactstrap's main functionalities?

Buttons

Reactstrap provides a variety of button components that can be customized with different colors, sizes, and styles. The example shows a primary button.

<Button color="primary">Primary Button</Button>

Modals

Reactstrap includes modal components that can be used to create dialog boxes. The example demonstrates a modal with a header, body, and footer.

<Modal isOpen={modal} toggle={toggle}><ModalHeader toggle={toggle}>Modal title</ModalHeader><ModalBody>Modal content</ModalBody><ModalFooter><Button color="primary" onClick={toggle}>Do Something</Button><Button color="secondary" onClick={toggle}>Cancel</Button></ModalFooter></Modal>

Forms

Reactstrap provides form components to create various types of forms. The example shows a simple form with email and password fields.

<Form><FormGroup><Label for="exampleEmail">Email</Label><Input type="email" name="email" id="exampleEmail" placeholder="Enter your email" /></FormGroup><FormGroup><Label for="examplePassword">Password</Label><Input type="password" name="password" id="examplePassword" placeholder="Enter your password" /></FormGroup><Button>Submit</Button></Form>

Navbars

Reactstrap includes navbar components to create responsive navigation headers. The example shows a simple navbar with links.

<Navbar color="light" light expand="md"><NavbarBrand href="/">Brand</NavbarBrand><NavbarToggler onClick={toggle} /><Collapse isOpen={isOpen} navbar><Nav className="ml-auto" navbar><NavItem><NavLink href="/components/">Components</NavLink></NavItem><NavItem><NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink></NavItem></Nav></Collapse></Navbar>

Cards

Reactstrap provides card components to create flexible and extensible content containers. The example shows a card with an image, title, text, and button.

<Card><CardImg top width="100%" src="/path/to/image.jpg" alt="Card image cap" /><CardBody><CardTitle>Card Title</CardTitle><CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText><Button>Button</Button></CardBody></Card>

Other packages similar to reactstrap

Keywords

FAQs

Package last updated on 26 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc