react-redux-permission

React Redux Permission controls rendering of permission components & routes using redux.

Install

npm install --save react-redux-permission

Features

• Restrict views and components
• Provide a fallback component for users without permission
• Designed for react-redux
• SSR Support
• Hooks support

Usage

Reducer

import { createStore, compose } from 'redux';
import { combineReducers } from "redux";
import { permissionsReducer as permissions } from "react-redux-permission";

export const configureStore = (initialState = {}) => {
  return createStore(
    combineReducers({
      permissions,
    }), initialState,);
}

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { configureStore } from "./redux/store";
import { Provider } from "react-redux";
import { PermissionProvider, Show, useAccess } from "react-redux-permission";

const store = configureStore();

const App = () => {
  const { hasPermission, definePermission, isLoaded } = useAccess();

  useEffect(() => {
    definePermission(["feature:read", "feature:write"]);
  }, []);

  const canRead = hasPermission("feature:read");

  if (!isLoaded) return <div>LOADING...</div>;

  return (
    <div>
      <div>feature:read Access ({`${canRead}`})</div>
      <div>feature:write Access ({`${canWrite}`})</div>
      <Show when="feature:read">
        <div>i'm visible because the user has the feature:read permission.</div>
      </Show>
      <Show
        when="feature:write"
        fallback={
          <div>I'm a fallback that's rendering because the user doesn't have access to feature:delete</div>
        }
      >
        <div>i'm visible because the user has the feature:delete permission.</div>
      </Show>
    </div>
  );
};

ReactDOM.render(
  <Provider store={store}>
    <PermissionProvider store={store} reducerKey="permissions">
      <App />
    </PermissionProvider>
  </Provider>,
  document.getElementById("root")
);

API Reference

PermissionProvider

By Wrapping up your application with <PermissionProvider />, all your hierarchy components will have ability to work with react-redux-permission.

import { PermissionProvider } from "react-redux-permission";

<PermissionProvider store={store} reducerKey="permission">
  <App />
</PermissionProvider>

Has 2 available props

params	value	default value	description
store	object	REQUIRED	Redux store object.
reducerKey	string	permissionsReducer	State key of your reducer.

Show

A Component can be use when want to render something conditionally, you can pass permission(s) into when prop.

import { Show } from "react-redux-permission";

<Show
  when="feature:delete"
  fallback={
    <div>user doesn't have permission to feature:delete</div>
  }
>
  <div>user have feature:delete permission.</div>
</Show>

Has 2 available props

params	value	default value	description
when	string / array	REQUIRED	The permission(s) we want to check against.
fallback	ReactNode	-	What to render when the user doesn't have access.

useAccess

A hook gives you access to PermissionContext context.

isLoaded

isLoaded will be false if definePermission has never been called. Once definePermission is called we assume isLoaded is true. This flag can be used to prevent loading the app until permissions have been fetched and loaded.

definePermission(["feature:read", "feature:write"]);

you can use action too, to define permissions through redux as below.

import { definePermission as define } from "react-redux-permission";

import { useDispatch } from 'react-redux';

export const ExampleComponent = () => {

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(define(["feature:read", "feature:write"]))
  },[])

  return <div>example component</div>
}

hasPermission

const canRead = hasPermission("feature:read");
const canWrite = hasPermission("feature:write");
const canDelete = hasPermission("feature:delete");

License

MIT © patelmayankce