-
Notifications
You must be signed in to change notification settings - Fork 158
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[changed] Replace everything with LinkContainer
- Loading branch information
Showing
47 changed files
with
639 additions
and
1,805 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,7 @@ | ||
| { | ||
| "extends": ["eslint-config-airbnb"], | ||
| "env": { | ||
| "browser": true, | ||
| "node": true | ||
| }, | ||
| "ecmaFeatures": { | ||
| "jsx": true | ||
| }, | ||
| "parser": "babel-eslint", | ||
| "plugins": [ | ||
| "react", | ||
| "babel" | ||
| ], | ||
| "extends": "airbnb", | ||
| "rules": { | ||
| "comma-dangle": 0, | ||
| "comma-spacing": 1, | ||
| "key-spacing": 0, | ||
| "no-eq-null": 0, | ||
| "no-param-reassign": 0, | ||
| "no-underscore-dangle": 0, | ||
| "no-undef": 2, | ||
| "no-unused-vars": [2, { "vars": "all", "args": "none" }], | ||
| "no-var": 2, | ||
| "babel/object-shorthand": 2, | ||
| "quotes": [1, "single", "avoid-escape"], | ||
| "react/display-name": 0, | ||
| "react/jsx-no-undef": 2, | ||
| "react/jsx-quotes": 0, | ||
| "react/jsx-uses-react": 2, | ||
| "react/no-did-mount-set-state": 2, | ||
| "react/no-did-update-set-state": 2, | ||
| "react/no-multi-comp": 2, | ||
| "react/prop-types": [1, { "ignore": ["children", "className"] }], | ||
| "react/react-in-jsx-scope": 2, | ||
| "react/self-closing-comp": 1, | ||
| "react/wrap-multilines": 2, | ||
| "react/jsx-uses-vars": 1, | ||
| "strict": 0 | ||
| "no-eq-null": 0 | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| # Contributing | ||
|
|
||
| As part of the react-bootstrap organization all contributing guidelines can be | ||
| found at: | ||
| https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md | ||
| As part of the react-bootstrap organization all contributing guidelines can be found at: https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md. | ||
|
|
||
| Note that automated changelog generation has not been setup on this repo yet. | ||
| Use `npm run visual-test` to check the appearance of components in your browser. The page will load at [http://localhost:8080/](http://localhost:8080/). | ||
|
|
||
| Note that automated changelog generation has not been set up on this repo yet. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,127 +1,33 @@ | ||
| # react-router-bootstrap | ||
| Integration between [React Router](https://github.com/rackt/react-router) and [React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap). | ||
|
|
||
| [](https://travis-ci.org/react-bootstrap/react-router-bootstrap) | ||
| [](http://badge.fury.io/js/react-router-bootstrap) | ||
|
|
||
| Intregation between [react-router](https://github.com/rackt/react-router) and [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | ||
|
|
||
| This package gives you react-router compatible substitutes for: | ||
|
|
||
| - `NavItem` -> `NavItemLink` | ||
| - `Button` -> `ButtonLink` | ||
| - `MenuItem` -> `MenuItemLink` | ||
| - `ListGroupItem` -> `ListGroupItemLink` | ||
| - `PageItem` -> `PageItemLink` | ||
| - `Thumbnail` -> `ThumbnailLink` | ||
|
|
||
| Turning this: | ||
| ## Usage | ||
|
|
||
| ```jsx | ||
| React.createClass({ | ||
| mixins: [State, Navigation], | ||
| Wrap your React-Bootstrap element in a `LinkContainer` to make it behave like a React Router `Link`: | ||
|
|
||
| render: function() { | ||
| var href = this.makeHref('destination', {some: 'params'}, {some: 'query param'}); | ||
| var isActive = this.isActive('destination', {some: 'params'}, {some: 'query param'}); | ||
| return <Button href={href} active={isActive}>; | ||
| } | ||
| }); | ||
| ```js | ||
| <LinkContainer to="/foo" query={{bar: "baz"}}> | ||
| <Button>Foo</Button> | ||
| </LinkContainer> | ||
| ``` | ||
|
|
||
| Into this | ||
|
|
||
| ```jsx | ||
| React.createClass({ | ||
| render: function() { | ||
| return <ButtonLink to="destination" params={{ some: 'params' }} query={{some: 'query param'}}>; | ||
| } | ||
| }); | ||
| ``` | ||
| To disable the element and the link, set the `disabled` prop on the `LinkContainer`. For the equivalent of `IndexLink`, use `IndexLinkContainer`. | ||
|
|
||
| ## Installation | ||
|
|
||
| ``` | ||
| npm install --save react-router-bootstrap | ||
| npm install react-router-bootstrap | ||
| ``` | ||
|
|
||
| You will also (if you haven't already) want to install `react-router` and `react-bootstrap` | ||
| You will also want to have React Router and React-Bootstrap. | ||
|
|
||
| ``` | ||
| npm install --save react-router react-bootstrap | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| A simple example | ||
|
|
||
| ```jsx | ||
| var Router = require('react-router') | ||
| , RouteHandler = Router.RouteHandler | ||
| , Route = Router.Route; | ||
|
|
||
| var ReactBootstrap = require('react-bootstrap') | ||
| , Nav = ReactBootstrap.Nav | ||
| , ListGroup = ReactBootstrap.ListGroup; | ||
|
|
||
| var ReactRouterBootstrap = require('react-router-bootstrap') | ||
| , NavItemLink = ReactRouterBootstrap.NavItemLink | ||
| , ButtonLink = ReactRouterBootstrap.ButtonLink | ||
| , ListGroupItemLink = ReactRouterBootstrap.ListGroupItemLink; | ||
|
|
||
| var App = React.createClass({ | ||
| render: function() { | ||
| return ( | ||
| <div> | ||
| NavItemLink<br /> | ||
| <Nav> | ||
| <NavItemLink | ||
| to="destination" | ||
| params={{ someparam: 'hello' }}> | ||
| Linky! | ||
| </NavItemLink> | ||
| </Nav> | ||
| <br /> | ||
| ButtonLink<br /> | ||
| <ButtonLink | ||
| to="destination" | ||
| params={{ someparam: 'hello' }}> | ||
| Linky! | ||
| </ButtonLink> | ||
| <br /> | ||
| <ListGroup> | ||
| <ListGroupItemLink | ||
| to="destination" | ||
| params={{ someparam: 'hello' }}> | ||
| Linky! | ||
| </ListGroupItemLink> | ||
| </ListGroup> | ||
| <RouteHandler /> | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| var Destination = React.createClass({ | ||
| render: function() { | ||
| return <div>You made it!</div>; | ||
| } | ||
| }); | ||
|
|
||
| var routes = ( | ||
| <Route handler={App} path="/"> | ||
| <Route name="destination" path="destination/:someparam" handler={Destination} /> | ||
| </Route> | ||
| ); | ||
|
|
||
| Router.run(routes, function (Handler) { | ||
| React.render(<Handler/>, document.body); | ||
| }); | ||
|
|
||
| npm install react-router react-bootstrap | ||
| ``` | ||
|
|
||
| ## Contributing | ||
|
|
||
| See [CONTRIBUTING](CONTRIBUTING.md) | ||
|
|
||
| Use `npm run visual-test` command to check components appearance in browser. It will open browser with a blank page. Then after `webpack-server` finishes its bundling, the browser automatically will refresh the page. | ||
|
|
||
| URL for it: http://localhost:8080/public/visual#/ | ||
| See [CONTRIBUTING](CONTRIBUTING.md). |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.