DOCSEARCHbyAlgolia
Submit Docs

Reactstrap Documentation

website·Indexed 29 days ago

https://rbv4.netlify.app

A collection of free and premium React templates and themes powered by Reactstrap.

Tokens
570
Snippets
5
Records
6
Agent score
25%

What's inside Reactstrap

  1. Find Reactstrap-powered themes and templates

    Reactstrap provides a curated list of free and premium themes and admin dashboards built on top of the Reactstrap components library. These are available from several partners:

    • Creative Tim: Offers a wide range of kits and dashboards including Now UI, Argon, Paper Kit, and BLK Design System.
    • UiFort: Provides admin templates such as Bamburgh.
    • WrapPixel: Offers MaterialPro, Xtreme Admin, and AdminPro templates.
    • PIXINVENT: Provides the Vuexy admin dashboard.
    • MDBootstrap: Offers Material Design for Bootstrap 5 & React 17 with over 700 components.

  2. Install reactstrap via NPM

    Install reactstrap and its peer dependencies using NPM. Note that reactstrap does not include Bootstrap CSS, so the bootstrap package must be installed separately to provide the necessary styling.
    npm install --save bootstrap
npm install --save reactstrap react react-dom

  3. Include reactstrap via CDN

    Reactstrap can be linked directly via CDN. When using the CDN, you must ensure that React and ReactTransitionGroup are loaded before the Reactstrap library.
    https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js

  4. Configure Bootstrap CSS for reactstrap

    To enable Bootstrap styling in a React application, import the Bootstrap CSS file in the application's entry point (typically src/index.js).
    import 'bootstrap/dist/css/bootstrap.min.css';

  5. Understand reactstrap core concepts and props

    reactstrap favors composition via props.children over named props for passing components. It uses specific attributes to manage state and styling:

    • isOpen: Controls the visibility state of components like dropdowns, popovers, and tooltips.
    • toggle: A callback function used to toggle the isOpen state.
    • color: Applies Bootstrap color classes (e.g., color="danger").
    • size: Controls size classes (e.g., size="sm").
    • tag: Allows customizing the output element or component.
    // Preferred composition pattern using children
<Tooltip target="TooltipExample">
  <TooltipContent/>
</Tooltip>

  6. Use reactstrap components in a React project

    Import specific components from the reactstrap library and use them within your JSX. Components use props like color and size to apply Bootstrap modifier classes.
    import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger" size="sm">Danger!</Button>
  );
};