https://github.com/rbalicki2/react-bootstrap-extended
A version of React Bootstrap which accepts props that add Bootstrap's utility classes
https://github.com/rbalicki2/react-bootstrap-extended
bootstrap classnames props react react-bootstrap
Last synced: 2 months ago
JSON representation
A version of React Bootstrap which accepts props that add Bootstrap's utility classes
- Host: GitHub
- URL: https://github.com/rbalicki2/react-bootstrap-extended
- Owner: rbalicki2
- Created: 2017-04-29T17:57:34.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-16T18:45:47.000Z (almost 8 years ago)
- Last Synced: 2025-04-05T07:33:12.088Z (3 months ago)
- Topics: bootstrap, classnames, props, react, react-bootstrap
- Language: JavaScript
- Homepage:
- Size: 987 KB
- Stars: 38
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Bootstrap Extended
> A version of React Bootstrap which accepts props that add Bootstrap's utility classes
## Quick reference
```
import { Panel } from 'react-bootstrap-extended';
// in your render() method
return (
This panel has the
text-uppercase
and text-danger
classes applied to it.
);
```
## Motivation
At their best, React components expose simple, clean and statically-typed interfaces (via `propTypes`) that effectively hide their internal complexity. However, these components often are not specifically tailored to our needs, and we resort to the use of `className`s (and `style`) to augment their capabilities.
`className`s are problematic because they are strings with absolutely no validation.
In React Bootstrap (which is the best set of web building blocks, bar none), I often find myself adding Bootstrap utility classes to existing components, e.g.
`Click Me!`
Some disadvantages to this method include:
1. It is more difficult to statically analyze and quickly examine. For example, `pul-right` may sneak through code review. In particular, Flow and Typescript are of no help here.
2. It is difficult to distinguish one-off classes (e.g. `className="my-login-button"`) from global classes. This prevents code reuse: another developer will not know that they can re-use the `pull-right` class and instead, will write that CSS themselves.
This package brings that static typing to bootstrap utility classes in a fully flow-compatible way.
## API
This package exposes all of the original bootstrap components, and utils, and wraps the appropriate ones.
## 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.
## The existing `pullRight` and `pullLeft` props don't work on `DropdownButton`, `SplitButton`, `Dropdown` and `Nav`!
There are a few components that use the same props (`pullRight` and `pullLeft`). This is a known bug, and a fix is planned for an upcoming release.
Note that for some components, such as for `Badge`s, the overloaded `pullRight` prop has the same effect.
## TODO
* Expose an easy way of adding props for classes you custom-defined
* Add more tests
* Flow bindings
## Contributing
Please, feel free to reach out and contribute! [[email protected]](mailto:[email protected])