react-role-manager
Simple React component to manage users roles/teams based on Semantic UI for React
Install
npm i --save @techexmachina/react-role-manager
Example
;;;;;; const roles = "super-admin" "admin" "author" "subscriber" "user"; const users = _id: 1 name: "david" roles: 'admin' _id: 2 name: "simon" roles: 'subscriber' _id: 3 name: "sylvain" roles: 'author' _id: 4 name: "francois" roles: 'subscriber' _id: 5 name: "jimmy" roles: 'admin' ; /********************************************************/ { super props ; ; thisstate = loading: false results: columns: '_id' 'name' ; } { this; searchValue = searchValue; if !roleslength && !searchValue this; else ; } { console; // Update your databse here } { const loading results columns = thisstate; return <RoleManager loading=loading results=results onOptionChange=thishandeOptionChange roles=roles columns=columns onRoleChange=thishandleRoleChange /> ; }
Props
RoleManager props
Format | Required | What it does ? | |
---|---|---|---|
loading | boolean |
NO | Set to true if entries are being fetched / computed |
onRoleChange | function |
YES | A callback used to catch role changes on a specific user. Receives an array of roles (strings ) & a user _id as parameters |
onOptionChange | function |
YES | A callback used to be called when the Search field or a role Checkbox is updated. Receives an array of roles (strings ) & a search string as parameters |
roles | [string] |
YES | An array of strings to display the different roles/teams that can be (un)checked for changing search options |
results | [object] |
NO | An array of user objects to fill the TableGenerator . Each object must have at least a roles attribute (array of string ) and an _id (string or number ) |
columns | [string or object] |
YES | An array of string or object representing the different columns displayed by the TableGenerator . Strings should match of the user object property. Objects must contains at least a name (string ) property for naming the column, and a as property, which is a React.Component prototype of your choice to be displayed in the cell. Objects can also have an arbitrary additionalProps property, which will be passed to the as component. |
Notes
The RoleManager is based on react-table-generator
module. It will automaticaly add an additional column to the Table
with a semantic Dropdown
in order to let you remove and add roles to users. The dropdown will automatically receive the onRoleChange
prop and the user roles
and _id
Contributors
- David Panart (@Fen747)
MIT Licensed