use-roles

useRoles hook for role based rendering

Install

npm install --save use-roles

or

yarn add use-roles

Usage

import React, {useEffect} from 'react'

import {useRoles, RolesProvider, RoleChecker} from 'use-roles'
import 'use-roles/dist/index.css'

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

const RoleBasedComponent = () => {
  const {setRole, setNowAllowed} = useRoles()
  useEffect(() => {
      setRole('admin')
      setNotAllowed(<div>You are not allowed to access this component</div>) // OPTIONAL
  }, [])
  return (
    <RoleChecker allowedRoles={['admin', 'testers']}>
      <p>Only admins and testers can see this</p>
    </RoleChecker>
    <RoleChecker allowedRoles={['accounting']}>
      <p>Only accountants can see this</p>
    </RoleChecker>
    <div>Anyone can see this</div>
  )
}

License

MIT © ap3ttit