https://github.com/hypersoftllc/qc-react-conditionals
A set of React components that conditionally renders its renderable children.
https://github.com/hypersoftllc/qc-react-conditionals
Last synced: 2 months ago
JSON representation
A set of React components that conditionally renders its renderable children.
- Host: GitHub
- URL: https://github.com/hypersoftllc/qc-react-conditionals
- Owner: hypersoftllc
- License: isc
- Created: 2018-01-26T03:23:55.000Z (over 8 years ago)
- Default Branch: develop
- Last Pushed: 2018-04-04T02:30:01.000Z (over 8 years ago)
- Last Synced: 2025-09-26T19:20:28.691Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 218 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @qc/react-conditionals
[![Build Status][travis-svg]][travis-url]
[![Coverage Status][coverage-image]][coverage-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
[![npm badge][npm-badge-png]][package-url]
A set of React components that conditionally renders its renderable children.
## Installation
```sh
npm install --save @qc/react-conditionals
```
or
```sh
yarn add @qc/react-conditionals
```
## Example Usage
```jsx
import React from 'react'
import { Case, Else, If, Then, When } from '@qc/react-conditionals'
function SomeComponent(props) {
return (
The status is active!
The status is not active.
The status is active!
The status is pending!
The status is unknown!
The status is active!
)
}
```
## <If>
`` may take as many `` or `` components as you like. The order
of which does not matter.
```jsx
This is rendered when If's condition is truthy.
This is rendered when If's condition is not
truthy.
This will be rendered regardless of If's condition.
That is, any renderable children outside of Thens or
Elses will be rendered.
This will also be rendered when condition is NOT truthy.
That is, all immediate child Else components will be
rendered when the condition is not true.
This will also be rendered when If's condition is
truthy.
```
## <Case>
`` may take as many `` components you like. It may optionally take
one `` component. The order of the `` and `` components in a
`` is important. ``s must come before the ``.
```jsx
The status is active!
This will NOT be rendered. Only the first When
component with a truty condition will be rendered.
The status is pending!
The status is unknown!
```
Renderables between `` and `` components are always rendered.
```jsx
This is always rendered.
...
This is also always rendered.
...
This is also always rendered.
...
This is also always rendered.
```
## <When>
`` can be used on its own outside of a `` parent component. It is
equivalent to an ``/`` combination.
```jsx
This will be rendered when the condition is true.
```
## Unsupported Usage
**`` Outside of an ``**
```jsx
This is not guaranteed to be rendered or not since it does
not have an appropriate parent.
```
**`` Outside of a `` or an ``**
```jsx
This is not guaranteed to be rendered or not since it does
not have appropriate parents.
```
**`` before ``**
```jsx
This is not guaranteed to be rendered or not since it
comes before any <When> components. In fact, it
may cause any successive <When> components to not
render.
...
```
## Other Packages from [QC]
* [@qc/react-block][qc-react-block]
* [@qc/react-layer][qc-react-layer]
* [@qc/react-page][qc-react-page]
## Maintainers
- [Danny Hurlburt](https://github.com/dhurlburtusa)
## License
ISC
[coverage-image]: https://coveralls.io/repos/github/hypersoftllc/qc-react-conditionals/badge.svg?branch=master
[coverage-url]: https://coveralls.io/github/hypersoftllc/qc-react-conditionals?branch=master
[downloads-image]: http://img.shields.io/npm/dm/qc-react-conditionals.svg
[downloads-url]: http://npm-stat.com/charts.html?package=qc-react-conditionals
[license-image]: http://img.shields.io/npm/l/qc-react-conditionals.svg
[license-url]: LICENSE
[package-url]: https://npmjs.org/package/qc-react-conditionals
[npm-badge-png]: https://nodei.co/npm/qc-react-conditionals.png?downloads=true&stars=true
[qc]: https://www.npmjs.com/~qc
[qc-react-block]: https://www.npmjs.com/package/@qc/react-block
[qc-react-layer]: https://www.npmjs.com/package/@qc/react-layer
[qc-react-page]: https://www.npmjs.com/package/@qc/react-page
[travis-svg]: https://travis-ci.org/hypersoftllc/qc-react-conditionals.svg?branch=master
[travis-url]: https://travis-ci.org/hypersoftllc/qc-react-conditionals