https://github.com/ramsunvtech/react-camouflage
camouflage components help to change view as per various status
https://github.com/ramsunvtech/react-camouflage
Last synced: 12 months ago
JSON representation
camouflage components help to change view as per various status
- Host: GitHub
- URL: https://github.com/ramsunvtech/react-camouflage
- Owner: ramsunvtech
- Created: 2021-12-25T03:55:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-26T14:51:16.000Z (over 4 years ago)
- Last Synced: 2025-05-16T03:31:59.713Z (about 1 year ago)
- Language: JavaScript
- Size: 281 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-camouflage
`react-camouflage` components help to change view as per various status
## Usage
### FetchView
#### Get rid of the below lengthy conditions for your API (service) status.
```
if (!status) {
return
Partial Loader goes here
} else if (status === 'loading') {
return Spinner goes here
} else if (status === 'success') {
return Service Data List here
} else {
return (
Error Occurred: Please click to try again.
);
}
```
#### Example for FetchView with `status` Props.
```
const status = 'success';
/**
* `FetchView.Initial` will render when status is undefined or null.
* `FetchView.Fetching` will render when status is 'loading`.
* `FetchView.Fetched` will render when status is 'success`.
* `FetchView.Error` will render when status is 'error`.
*/
Partial Loader goes here
Spinner goes here
Service Data List here
Error Occurred: Please click to try again.
```
#### Example for FetchView with `status` Props.
```
const statusMapping = {
[Statuses.Success]: (status === 'success'),
[Statuses.Error]: (status === 'error'),
[Statuses.Loading]: (status === 'loading'),
}
Partial Loader goes here
Spinner goes here
Service Data List here
Error Occurred: Please click to try again.
```
##### Using NPM:
```sh
$ npm install react-camouflage --save
```
##### Using yarn
```sh
$ yarn add react-camouflage
```
# Demo
[Code Sandbox Working Demo](https://codesandbox.io/s/react-camouflage-test-in-ts-f139j)
# License
MIT