https://github.com/drawbotics/if-only
A tiny react component that only renders children if a condition if met.
https://github.com/drawbotics/if-only
Last synced: 2 months ago
JSON representation
A tiny react component that only renders children if a condition if met.
- Host: GitHub
- URL: https://github.com/drawbotics/if-only
- Owner: Drawbotics
- License: mit
- Created: 2017-05-23T14:22:54.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-25T12:25:06.000Z (over 7 years ago)
- Last Synced: 2024-12-22T03:07:56.453Z (5 months ago)
- Language: JavaScript
- Size: 26.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# If-only
A tiny react component that only renders children if a condition if met.
## Installation
Install it using yarn:
```bash
$ yarn add if-only
```
## Usage
### Simple usage
```javascript
const Component = () => (
// ...
// will render if someCondition is true
);
```
### Advanced usage
If there's only one child, then it's going to render that child, but if there's more than one child, then, it's going to wrap them with an external component. That external component depends on the following props.
#### Manually specifying the external component
This takes precedence over any other prop.
```javascript
const Component = () => (
// ...
// will render if someCondition is true wrapping it with
);
```
#### Using a default external component
If `inline` is specified, it will wrap the children with a `span` tag. Otherwise, it will just use a `div` tag.
```javascript
const Component = () => (
// ...
// Will render if someCondition is true wrapping it with a
);
```
#### Specifying style and className for external component
If a external component is to be rendered, the `className` and `style` props can be specified on the `If` component and
it will pass them down to the external component.
```javascript
const Component = () => (
// ...
// Will render if someCondition is true. External will have className="CustomName"
);
```
## License
MIT. See [LICENSE](LICENSE) for detail.