https://github.com/soontao/react-visible-control
Control the rendering or non-rendering of components in simple way
https://github.com/soontao/react-visible-control
context react react-component react-native
Last synced: 3 months ago
JSON representation
Control the rendering or non-rendering of components in simple way
- Host: GitHub
- URL: https://github.com/soontao/react-visible-control
- Owner: Soontao
- Created: 2018-02-06T14:13:05.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:17:12.000Z (over 2 years ago)
- Last Synced: 2025-02-25T20:40:30.594Z (over 1 year ago)
- Topics: context, react, react-component, react-native
- Language: JavaScript
- Homepage:
- Size: 49.8 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Visible Control
[](https://circleci.com/gh/Soontao/react-visible-control) [](https://codecov.io/gh/Soontao/react-visible-control) [](https://badge.fury.io/js/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](https://reactjs.org/docs/context.html), please make sure the `shouldComponentUpdate` method works correct in your project
## install
```bash
npm i -S react-visible-control
```
## sample application
[Here is a sample application based on react-visible-control](https://github.com/Soontao/react-visible-control-sample)
Basic usage as following
```jsx
import React, { Component } from 'react';
import { Failback, VisibleContext, VisibleControl } from 'react-visible-control';
const visibleData = { "home": true, "page1": true, "page2": false }
export default class Test extends Component {
render() {
return (
home
page1
page2
you cant access page2, but you could show a failback thing here
page3
);
}
}
```
Render Result:
```html
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
```javascript
// mock user data
const 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 Control
const userHavePermission = per => data => data.permissions && data.permissions.indexOf(per) >= 0
export const UserReadPermission = createVisibleControl(userHavePermission("user_read"));
export const UserWritePermission = createVisibleControl(userHavePermission("user_write"));
export const UserDeletePermission = createVisibleControl(userHavePermission("user_delete"));
export const UserUpdatePermission = createVisibleControl(userHavePermission("user_update"));
// app view
class App extends Component {
constructor(props) {
super(props);
this.state = {
"counter": 0,
"visibleData": {}
};
}
render() {
return (
{
this.setState({ "visibleData": users[this.state.counter % users.length] });
this.setState({ "counter": this.state.counter + 1 });
}} >
change user
You have User Delete Permission
You have User Write Permission
You have User Read Permission
You have User Update Permission
);
}
}
```
## License
MIT