React Visible Control
Control the rendering or non-rendering of components in simple way.
Works for React & React Native.
WARNING!!!, please make sure you know what you are doing !
this lib use React Context API, please make sure the shouldComponentUpdate
method works correct in your project
install
npm i -S react-visible-control
sample application
Here is a sample application based on react-visible-control
Basic usage as following
import React Component from 'react';import Failback VisibleContext VisibleControl from 'react-visible-control'; const visibleData = "home": true "page1": true "page2": false { return <VisibleContext => <div> <VisibleControl => <p>home</p> </VisibleControl> <VisibleControl => <p>page1</p> </VisibleControl> <VisibleControl => <p>page2</p> <Failback><p>you cant access page2 but you could show a failback thing here</p></Failback> </VisibleControl> <VisibleControl => <p>page3</p> </VisibleControl> </div> </VisibleContext> ; }
Render Result:
home page1 you cant access page2, but you could show a failback thing here
custom usage
in this demo, without permission, react will not render child component
// mock user dataconst users = "name": "Theo Sun" "permissions": "user_read" "user_write" "user_update" "user_delete" "role": "user_manager" "name": "Cherry Xu" "permissions": "user_read" "role": "user_viewer" ; // custome Controlconst userHavePermission = datapermissions && datapermissions >= 0 const UserReadPermission = ;const UserWritePermission = ;const UserDeletePermission = ;const UserUpdatePermission = ; // app view { superprops; thisstate = "counter": 0 "visibleData": {} ; } { return <VisibleContext data=thisstatevisibleData> <button onClick= { this; this; } > change user</button> <div className="App"> <UserDeletePermission><p>You have User Delete Permission</p></UserDeletePermission> <UserWritePermission><p>You have User Write Permission</p></UserWritePermission> <UserReadPermission><p>You have User Read Permission</p></UserReadPermission> <UserUpdatePermission><p>You have User Update Permission</p></UserUpdatePermission> </div> </VisibleContext> ; }
License
MIT