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>