bcp

bootstrap-class-props

Class props and wrapper for bootstrap utility classes

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Readme

Bootstrap Class Props

A decorator which adds props like textMuted to components

Usage

With external components

import addBootstrapClassProps from 'bootstrap-class-props';
import SomeExistingComponent from './MyComponent';
export default addBootstrapClassProps(SomeExistingComponent);

With components defined in the file

import React, { Component, PropTypes } from 'react';
import addBootstrapClassProps from 'bootstrap-class-props';

@addBootstrapClassProps
export default class MyComponent extends Component {
  static propTypes = {
    className: PropTypes.string, // make sure your component accepts a className propType
  };
}

Now, MyComponent and SomeExistingComponent have props like bgSuccess, etc. These props, if present and truthy, add the appropriate className to the component.

Help! It's not working with a particular component

Make sure the component accepts a className propType!

Full list of props and utility classes

The keys in this object are the prop names. The values are the classes applied.

{
  "textMuted": "text-muted",
  "textPrimary": "text-primary",
  "textSuccess": "text-success",
  "textInfo": "text-info",
  "textWarning": "text-warning",
  "textDanger": "text-danger",
  "bgPrimary": "bg-primary",
  "bgSuccess": "bg-success",
  "bgInfo": "bg-info",
  "bgWarning": "bg-warning",
  "bgDanger": "bg-danger",
  "pullLeft": "pull-left",
  "pullRight": "pull-right",
  "navbarLeft": "navbar-left",
  "navbarRight": "navbar-right",
  "centerBlock": "center-block",
  "clearfix": "clearfix",
  "invisible": "invisible",
  "srOnly": "sr-only",
  "srOnlyFocusable": "sr-only sr-only-focusable",
  "textHide": "text-hide",
  "visibleXsBlock": "visible-xs-block",
  "visibleXsInline": "visible-xs-inline",
  "visibleXsInlineBlock": "visible-xs-inline-block",
  "hiddenXs": "hidden-xs",
  "visibleSmBlock": "visible-sm-block",
  "visibleSmInline": "visible-sm-inline",
  "visibleSmInlineBlock": "visible-sm-inline-block",
  "hiddenSm": "hidden-sm",
  "visibleMdBlock": "visible-md-block",
  "visibleMdInline": "visible-md-inline",
  "visibleMdInlineBlock": "visible-md-inline-block",
  "hiddenMd": "hidden-md",
  "visibleLgBlock": "visible-lg-block",
  "visibleLgInline": "visible-lg-inline",
  "visibleLgInlineBlock": "visible-lg-inline-block",
  "hiddenLg": "hidden-lg",
  "visiblePrintBlock": "visible-print-block",
  "visiblePrintInline": "visible-print-inline",
  "visiblePrintInlineBlock": "visible-print-inline-block",
  "hiddenPrint": "hidden-print",
  "textLeft": "text-left",
  "textCenter": "text-center",
  "textRight": "text-right",
  "textJustify": "text-justify",
  "textNowrap": "text-nowrap",
  "textLowercase": "text-lowercase",
  "textUppercase": "text-uppercase",
  "textCapitalize": "text-capitalize",
  "initialism": "initialism"
}

My favorite bootstrap classes are omitted!

I omitted classes like show, hidden, caret and close because they are way too generic and will conflict with existing props.

I omitted classes like lead, blockquote-reverse, etc. because they are too component-specific.

If you want to add these back, a future release will give you that ability!

TODO

  • Expose an easy way of adding props for classes you custom-defined.
  • Tests
  • Typescript bindings?

Contributing

Please, feel free to reach out and contribute! robert.balicki@gmail.com

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial