1 | [![reactstrap](https://cloud.githubusercontent.com/assets/399776/13906899/1de62f0c-ee9f-11e5-95c0-c515fee8e918.png)](https://reactstrap.github.io)
|
2 |
|
3 | [![Build Status](https://travis-ci.org/reactstrap/reactstrap.svg?branch=master)](https://travis-ci.org/reactstrap/reactstrap) [![Coverage Status](https://coveralls.io/repos/github/reactstrap/reactstrap/badge.svg?branch=master)](https://coveralls.io/github/reactstrap/reactstrap?branch=master)
|
4 |
|
5 | # reactstrap
|
6 |
|
7 | Stateless React Components for Bootstrap 4.
|
8 |
|
9 | ## Getting Started
|
10 |
|
11 | Follow the [create-react-app instructions](https://github.com/facebookincubator/create-react-app#getting-started) up to the `Adding Bootstrap` section and instead follow the reactstrap version of [adding bootstrap](#adding-bootstrap).
|
12 |
|
13 | ### tl;dr
|
14 |
|
15 | ```
|
16 | npm install -g create-react-app
|
17 |
|
18 | create-react-app my-app
|
19 | cd my-app/
|
20 | npm start
|
21 | ```
|
22 |
|
23 | Then open [http://localhost:3000/](http://localhost:3000/) to see your app. The initial structure of your app is setup. Next, let's [add reactstrap and bootstrap](#adding-bootstrap).
|
24 |
|
25 | ### Adding Bootstrap
|
26 |
|
27 | Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:
|
28 |
|
29 | ```
|
30 | npm install bootstrap@4.0.0-alpha.6 --save
|
31 | npm install --save reactstrap react-transition-group react react-dom
|
32 | ```
|
33 |
|
34 | Import Bootstrap CSS in the ```src/index.js``` file:
|
35 |
|
36 | ```js
|
37 | import 'bootstrap/dist/css/bootstrap.css';
|
38 | ```
|
39 |
|
40 | Import required reactstrap components within ```src/App.js``` file or your custom component files:
|
41 |
|
42 | ```js
|
43 | import { Button } from 'reactstrap';
|
44 | ```
|
45 |
|
46 | Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.github.com/eddywashere/e13033c0e655ab7cda995f8bc77ce40d) redone using reactstrap.
|
47 |
|
48 | ## About the Project
|
49 |
|
50 | This library contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, [Tether](http://tether.io/) is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.
|
51 |
|
52 | There are a few core concepts to understand in order to make the most out of this library.
|
53 |
|
54 | 1. Your content is expected to be composed via props.children rather than using named props to pass in Components.
|
55 |
|
56 | ```js
|
57 | // Content passed in via props
|
58 | const Example = (props) => {
|
59 | return (
|
60 | <p>This is a tooltip <TooltipTrigger tooltip={TooltipContent}>example</TooltipTrigger>!</p>
|
61 | );
|
62 | }
|
63 |
|
64 | // Content passed in as children (Preferred)
|
65 | const PreferredExample = (props) => {
|
66 | return (
|
67 | <p>
|
68 | This is a <a href="#" id="TooltipExample">tooltip</a> example.
|
69 | <Tooltip target="TooltipExample">
|
70 | <TooltipContent/>
|
71 | </Tooltip>
|
72 | </p>
|
73 | );
|
74 | }
|
75 | ```
|
76 |
|
77 | 2. Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like tether), or automatically include non-content based elements.
|
78 |
|
79 | Examples:
|
80 |
|
81 | - `isOpen` - current state for items like dropdown, popover, tooltip
|
82 | - `toggle` - callback for toggling `isOpen` in the controlling component
|
83 | - `color` - applies color classes, ex: `<Button color="danger"/>`
|
84 | - `size` - for controlling size classes. ex: `<Button size="sm"/>`
|
85 | - `tag` - customize component output by passing in an element name or Component
|
86 | - boolean based props (attributes) when possible for alternative style classes or `sr-only` content
|
87 |
|
88 |
|
89 | ## [Documentation](https://reactstrap.github.io)
|
90 |
|
91 | https://reactstrap.github.io
|
92 |
|
93 | ## [Contributing](CONTRIBUTING.md)
|
94 |
|
95 | ## Development
|
96 |
|
97 | Install dependencies:
|
98 |
|
99 | ```sh
|
100 | npm install
|
101 | ```
|
102 |
|
103 | Run examples at [http://localhost:8080/](http://localhost:8080/) with webpack dev server:
|
104 |
|
105 | ```sh
|
106 | npm start
|
107 | ```
|
108 |
|
109 | Run tests & coverage report:
|
110 |
|
111 | ```sh
|
112 | npm test
|
113 | ```
|
114 |
|
115 | Watch tests:
|
116 |
|
117 | ```sh
|
118 | npm run test-watch
|
119 | ```
|
120 |
|
121 | ## In the wild
|
122 |
|
123 | Organizations and projects using `reactstrap`
|
124 |
|
125 | - [availity-reactstrap-validation](https://availity.github.io/availity-reactstrap-validation/)
|
126 | - [component-template](https://reactstrap.github.io/component-template/)
|
127 | - [video-react](https://video-react.github.io/)
|
128 | - [CoreUI-Free-Bootstrap-Admin-Template](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template) - [demo](http://coreui.io/demo/React_Demo/#/)
|
129 |
|
130 | Submit a PR to add to this list!
|
131 |
|
132 | Looking to build, document and publish reusable components built on top of `reactstrap`? Consider forking https://github.com/reactstrap/component-template to kickstart your project!
|