bs4react v0.1.9

bs4react

A Collection of React components for Bootstrap 4. Use props to customize the bootstrap classes applied to elements.

Bootstrap

The classes assigned to the components correlate to Bootstrap v4.0.0-alpha.6 and using a different version will result in unexpected behavior. At this point in time, Bootstrap is not required or included in this package. Please use one of the methods outlined in their docs to access Bootstrap in your project.

Get Started

Make sure you have also installed Bootstrap, React, ReactDom, and classNames

npm i -D bs4react or yarn add -D bs4react

import { Container, Row, Col } from 'bs4react'
//...
return (
  <Container bg="primary" textColor="white" fluid>
    <Row>
      <Col>
        Produce a div with a class of "col"
      <Col>
      <Col gridWidth="4">
        Produce a div with a class of "col-4"
      </Col>
      <Col gridWidth={['4', 'md-6']}>
        Produce a div with classes of "col-4" and "col-md-6"
      </Col>
      <Col className="foo">
        Produce a div with classes of "col" and "foo" - Props that are not explicitly consumed by the component are passed through.
      </Col>
    </Row>
  </Container>
)

Components Included

• Btn
• Col
• Container
• Jumbotron
• Nav
  • NavLink
• Navbar
  • NavbarBrand
  • NavbarCollapse
  • NavbarNav
  • NavbarToggler
• Row
• Utility

Utility

Utility is a High Order Component that every other component uses as a wrapper via the withUtility function. Composing the components in this way allows the following props to be used on any of the components provided:

It is important to note that more advanced PropType validation based on the classes provided by bootstrap is done within each component. For example, supplying a component with bg="foo" will produce an invalid PropType error. However, that component would still receive a class of bg-foo.

Utility props on custom components

To make the utility props available in a custom component, simply supply that component as an argument to withUtilities().

import { withUtilities } from 'bs4react'
//...
const CustomComponentWithUtilities = withUtilities(
  CustomComponent,
)
export default CustomComponentWithUtilities

Make sure you do not use the withUtilities function from within a render method

Btn

btn class is always applied

If a value for href is passed in, the Btn component will return an <a> element. Otherwise, it will default to a button

Col

col is applied if no gridWidth is defined. The col class can also be applied by passing undefined or null to the gridWidth prop.

Produces a <div element.

Container

container class is always applied to a <div> element.

Jumbotron

jumbotron class is always applied to a <section> element

Nav

NavLink

nav-link is always applied. NavLink always produces an <li> element that wraps an <a> element.

Navbar

navbar class is always applied to a <nav> element.

NavbarBrand

navbar-brand class is always applied to an <a> element.

NavbarCollapse

collapse and navbar-collapse are alway applied to a <div> element with id="navbarToggleTarget".

NavbarNav

navbar-nav is always applied to an <ul> element.

NavbarToggler

navbar-toggler is always applied to a <button> element with data-target="#navbarToggleTarget" as well as other accessibility-based roles.

Row

row is always applied to a <div> element.

TODOS

• Create React wrapper components for the remaining Bootstrap components
• Rewrite Bootstrap's javascript functionality to utilize React (Probably via additional HOCs)
• Find a way to include styles from Bootstrap
  • Sass? CSS-Modules? Something Else?
  • Should provide an easy way to use custom variables
  • Components should have access to the custom variables
  • Would a configuration .bootstraprc make sense?
• Create a best-practice for customizing/modifying the standard components
  • For example: if theme developers would like to make primaryGradient pass the prop validation for bg, where should they put that change?
• Add tests

Similar projects worth checking out

• react-bootstrap
• reactstrap