Numerous Philanthropic Misanthropes

    react-use-roles
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    react-use-roles

    Simple React Hook and Library for role based rendering

    NPM JavaScript Style Guide

    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

    Install

    npm i react-use-roles

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    21.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • ap3tt1tza