react-guards
Read this in other languages: 简体中文
The guard component can control whether the component can be displayed according to the permissions.
API
Component API
Property | Description | Type | Default |
---|---|---|---|
target | target value | string|string[]|Promise|() => Promise | null |
current | current value | string|string[]|'*' | null |
errComponent | Display component on error | ReactComponent | null |
loadingComponent | Display component on load | ReactComponent | null |
Function
Name | Description | Type |
---|---|---|
setGlobalCurrent | Set global current, do not pass current value by default use globalCurrent | (current: string | string[]) => void |
canPassGuard | Determine whether it can pass the guard based on the passed data | ({target, current}) => Promise |
Installation
npm install react-guards
or
yarn add react-guards
Usage
import {ReactGuards} from 'react-guards'
// Show components without passing any data
<ReactGuards>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
Basic
import {ReactGuards} from 'react-guards'
// none
<ReactGuards target='213' current='22'>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
// show
<ReactGuards target='213' current='22,213'>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
// none
<ReactGuards target='213' current={['22']}>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
// show
<ReactGuards target='213' current={['22', '213']}>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
// none
<ReactGuards target={Promise.resolve(false)} current='22,213'>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
// show
<ReactGuards target={Promise.resolve(true)} current='22,213'>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
// show
<ReactGuards target={(current) => Promise.resolve(true)} current='22,213'>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
Global current
import { ReactGuards, setGlobalCurrent as setGlobalCurrentForReactGuard } from 'react-guards'
setGlobalCurrentForReactGuard('22,213')
// show
<ReactGuards target='22'>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>
error and loading
import { ReactGuards, setGlobalCurrent as setGlobalCurrentForReactGuard } from 'react-guards'
const waitThenError = (): Promise<boolean> => {
return new Promise(resolve => {
setTimeout(() => {
resolve(false)
}, 2000);
})
}
const Load = () => <div>Loading</div>
const Error = () => <div>Error</div>
<ReactGuards target={waitThenError} errComponent={Error} loadingComponent={Load}>
213
<div>324</div>
<button onClick={() => alert(0)}>213213</button>
</ReactGuards>