react-use-roles

Simple React Hook and Library for role based rendering

Install

npm install --save react-use-roles

OR

yarn add react-use-roles

Usage

import React, { useEffect } from 'react'

import { RoleChecker, RolesProvider, useRoles, isAllowed } from 'react-use-roles'

const App = () => {
    return <RolesProvider>
        <RoleBasedComponent />
    </RolesProvider>
}

export default App

const RoleBasedComponent = () => {
    const { role, setRole, setDefaultTemplate } = useRoles()
    useEffect(() => {
        setRole('admin')
        setDefaultTemplate(<div style={{color: 'blue', fontStyle: 'italic'}}>No Ways!</div>) // OPTIONAL
    }, [])
    return (
        <>
            <RoleChecker allowed={['testers']}>
                <p>Hello 1</p>
            </RoleChecker>
            <RoleChecker allowed={['testers', 'admin']}>
                <p>Hello 2</p>
            </RoleChecker>
            <RoleChecker allowed={['accounts']} template={(<p>You can't access this</p>)}>
                <p>Hello 3</p>
                <p>Hello 3 again</p>
            </RoleChecker>
            <RoleChecker allowed={['testers', 'admin']} mode="includes"> {// IF ROLES MATCHES ANY LISTED ROLE, ACCESS WILL BE GRANTED (DEFAULTS TO INCLUDE IN MODE IS NOT SET)}
                <p>Hello 2</p>
            </RoleChecker>
            <RoleChecker allowed={['testers', 'admin']} mode="none"> {// IF ROLES MATCHES ANY LISTED ROLE, ACCESS WILL BE DENIED}
                <p>Hello 2</p>
            </RoleChecker>
            {isAllowed(role, ['admin']) && <p>Function to checking if this is allowed</p>}
        </p>
    )
}

License

MIT © ap3tt1t