https://github.com/rbalicki2/bootstrap-class-props
Class props and wrapper for bootstrap utility classes
https://github.com/rbalicki2/bootstrap-class-props
bootstrap class classname react
Last synced: about 2 months ago
JSON representation
Class props and wrapper for bootstrap utility classes
- Host: GitHub
- URL: https://github.com/rbalicki2/bootstrap-class-props
- Owner: rbalicki2
- Created: 2017-04-30T16:51:26.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-16T17:18:50.000Z (almost 9 years ago)
- Last Synced: 2024-04-27T00:07:03.539Z (about 2 years ago)
- Topics: bootstrap, class, classname, react
- Language: JavaScript
- Size: 84 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](mailto:robert.balicki@gmail.com)