https://github.com/pinebit/react-cr
A tiny library for conditional rendering in JSX.
https://github.com/pinebit/react-cr
Last synced: 11 months ago
JSON representation
A tiny library for conditional rendering in JSX.
- Host: GitHub
- URL: https://github.com/pinebit/react-cr
- Owner: pinebit
- License: mit
- Created: 2017-08-31T12:34:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-03T14:13:02.000Z (over 8 years ago)
- Last Synced: 2025-04-19T10:15:58.148Z (11 months ago)
- Language: JavaScript
- Homepage: https://pinebit.github.io/react-cr
- Size: 2.32 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-cr
A tiny library for conditional rendering in JSX.
The purpose of this library to offer a few components that will replace your JS-in-JSX with behavioral components.
For example, instead of writing conditions like this:
```jsx harmony
{this.state.isLoading && }
```
You can use one of react-cr components:
```jsx harmony
```
Similar to this example, the library offers: `Switch, Mobile, Desktop, Repeat, Interleave`.
Check [the complete spec here](https://pinebit.github.io/react-cr).
## Basic Usage
`npm install --save react-cr`
```jsx harmony
import { Visibility, Switch, Mobile, Desktop, Repeat, Interleave } from 'react-cr';
// control children visibility
// select child by index
// select child by multiple indices
{items.map(...)}
// repeat (clone) given n times
// render for mobile (or Desktop) only
// interleaves children with the given separator
,}>
Alpha
Beta
Gamma
```
## Components
[See detailed specification](https://pinebit.github.io/react-cr/#/components)
## License
*react-cr* is available under MIT. See LICENSE for more details.