react-guards v0.0.9

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

Function

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>