React RBAC UI Manager - User Guide

react-rbac-ui-manager is a simple RBAC (Role Based Access Control) user interface library based on the material design system using the Material-UI lib.

This lib generates a simple json output of the roles and permissions and can be used internally with any react with material-ui based application.

Table of contents

• Install
• Demo
• Usage
• API
• Custom Components
• Contributing
• License

Install

npm install @build-security/react-rbac-ui-manager --save

If your project doesn't already use them, you need to install @material-ui/core, @material-ui/icons and @material-ui/lab as well.

Demo

Check the live working example on codesandbox:

Usage

Simple usage:

import Rbac from "@build-security/react-rbac-ui-manager";
import { PermissionsObject } from "@build-security/react-rbac-ui-manager/dist/types";

const handleChange = (value: PermissionsObject) => {
    console.log(value)
};

<Rbac
    onChange={handleChange}
/>

Customized icons:

import Rbac from "@build-security/react-rbac-ui-manager";
import { PermissionsObject } from "@build-security/react-rbac-ui-manager/dist/types";
import DeleteIcon from '@material-ui/icons/Delete';
import styled from "styled-components";

const handleChange = (value: PermissionsObject) => {
    console.log(value)
 };

const deleteIcon = styled(DeleteIcon)`
    background: red;
    color: black;

    &.MuiSvgIcon-colorError {
        color: black;
    }
`;
 
<Rbac
    icons={{
        deleteIcon: deleteIcon
    }}
    onChange={handleChange}
/>

👉 Note - the JSON Viewer is not part of this lib.
The live example (in codesandbox) contains a working version with external viewer

API

<Rbac />

The Rbac component accepts the following props (none of which is required):

|Name|Type|Description |:--|:-----|:-----| |defaultValue|object|JSON structure, same as the one that is generated by the lib |onChange|function|Callback fired on every change. signature:function(data: object) => voiddata: The JSON object with the new value. |resourceForbiddenCharsRegex|RegExp|Regular expression to remove invalid characters from the resource |buttons|object|Object contains buttons to be used as replacement for the default buttons (see below) |icons|object|Object contains icons to be used as replacement for the default icons (see below) |components|object|Object contains components to be used as replacement for the default components (see below)

The Buttons object: |Name|Type|Description |:--|:-----|:-----| |cancelButton|node|The component to use for the cancel button inside the modal |closeButton|node|The component to use for the close button inside the modal |deleteButton|node|The component to use for the delete button inside the modal |saveButton|node|The component to use for the save button inside the modal

The Icons object: |Name|Type|Description |:--|:-----|:-----| |deleteIcon|node|The component to use for the delete icon in the roles column |editIcon|node|The component to use for the edit icon in the roles column |treeAddIcon|node|The component to use for the add icon in the tree |treeCollapseIcon|node|The component to use for the collapse icon in the tree |treeDeleteIcon|node|The component to use for the delete icon in the tree |treeExpandIcon|node|The component to use for the expand icon in the tree |treeEditIcon|node|The component to use for the edit icon in the tree |treeNodeIcon|node|The component to use for the non-expandable node in the tree |treeParentIcon|node|The component to use for the expandable node in the tree

The Components object: |Name|Type|Description |:--|:-----|:-----| |addResource|node|The component to use for the Add Resource block |addRole|node|The component to use for the Add Role block |checkboxTableContainer|node|The component to use for the container of the checkbox table |roleTag|node|The component to use for the role name tag

License

Licensed under the MIT License, Copyright © 2021-present Dekel Braunstein.

See LICENSE for more information.