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>