react-role-accesses v1.0.0

INSTALL

npm react-role-accesses or yarn react-role-accesses

DOC

Component

import React, {Component} from "react";
import Access from "react-role-accesses";
import User from "./${__dirname}"

const roles = ["GET_USER", "CHANGE_USER", "DELETE_USER"]
const fallbackElement = <div>Opps, you have no rights</div>

export default class UserList extends Component {
    render() {
        return (
          <Access roles={roles} allowed={"GET_USER"} fallbackElement={fallbackElement}>
            <User/>
          </Access>
        )
    }
}

The idea is to solve the task of displaying elements by code. You can get the list of roles from different sources (props, state, ...). The component is designed to check access.

roles - <Array> (List of all app permissions)
allowed - <String> (Allowed role)
fallbackElement - <JSX Node> (Returns when role is missing), default - null

HOC

import React, {Component} from "react";
import {permission} from "react-role-accesses";
import User from "./${__dirname}"

const roles = ["GET_USER", "CHANGE_USER", "DELETE_USER"]
const fallbackElement = <div>Opps, you have no rights</div>
const UserAccess = permission({ roles, allowed:"GET_USER", fallbackElement})(User);


export defalt class UserList extends Component {
    render() {
        return (
            <UserAccess/>
        )
    }
}