if-only
v2.0.0
Published
A tiny react component that only renders children if a condition is met.
Downloads
3
Readme
If-only
A tiny react component that only renders children if a condition if met.
Installation
Install it using yarn:
$ yarn add if-only
Usage
Simple usage
const Component = () => (
<div>
// ...
<If cond={someCondition}>
// will render if someCondition is true
</If>
</div>
);
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.
const Component = () => (
<div>
// ...
<If cond={someCondition} component={MyExternalComponent}>
// will render if someCondition is true wrapping it with <MyExternalComponent>
</If>
</div>
);
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.
const Component = () => (
<div>
// ...
<If cond={someCondition} inline>
// Will render if someCondition is true wrapping it with a <span>
<div />
<div />
</If>
</div>
);
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.
const Component = () => (
<div>
// ...
<If cond={someCondition} className="CustomName">
// Will render if someCondition is true. External <div> will have className="CustomName"
</If>
</div>
);
License
MIT. See LICENSE for detail.