https://github.com/theanam/react-simple-conditional
Conditional Rendering component in React
https://github.com/theanam/react-simple-conditional
component conditional es6 react show-hide
Last synced: 7 months ago
JSON representation
Conditional Rendering component in React
- Host: GitHub
- URL: https://github.com/theanam/react-simple-conditional
- Owner: theanam
- Created: 2018-08-07T16:45:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-11T11:44:38.000Z (about 6 years ago)
- Last Synced: 2025-06-04T01:15:31.686Z (8 months ago)
- Topics: component, conditional, es6, react, show-hide
- Language: JavaScript
- Homepage: https://www.npm.im/react-simple-conditional
- Size: 130 KB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Conditional render component for React and React Native
This simple conditional components only renders its children if the `condition` prop has a value that is `true` or **truthy** in JavaScript. If the condition prop has a value that interpretes as `false`, nothing (`null`) will be rendered.
The component renders nothing by itself, it uses [React Fragments](https://reactjs.org/docs/fragments.html) . All the *props* and *children* that you supply to the component gets passed to the div.
Usage:
### To istall the component simply run:
npm install --save react-simple-conditional
### Import it using:
import Conditional from 'react-simple-conditional'
### Use it in JSX:
```html
This will be rendered if 'someCondition' is true
```
### Full Example:
```js
import React, { Component } from 'react';
import Conditional from 'react-simple-conditional';
class App extends Component {
state={
renderCondition:true
}
render() {
return (
Hello World
);
}
}
export default App;
```
### License:
This project is distributed under the [MIT License](https://opensource.org/licenses/MIT)