Package Exports

react-pundit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pundit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-pundit

Downloads npm version dependencies dev dependencies License

React components to build permission controlled ui's.

With inspiration from Pundit.

Pre-requisites

You should be familiar with Node + NPM, React and ES6 to use this library.

Getting Started

Install it via npm:

npm install --save react-pundit

Other Components

Pundit based routes react-router Pundit.

Example

import { PunditContainer, VisibleIf } from 'react-pundit';
import policies from './policies.js';
import './App.css';

class App extends Component {
  render() {
    const userOne = { id: 1, role: 'basic', activated: false };
    const userTwo = { id: 2, role: 'basic', activated: true };
    const userAdmin = { id: 3, role: 'admin', activated: true };
    const userOneActivated = { id: 1, role: 'basic', activated: true };

    const post = { user: { id: 1 }, body: 'test', editable: true };

    return (
      <div className="App">
        <PunditContainer policies={policies} user={userOne}>
          <PunditTypeSet type="Post">
            <VisibleIf action="Create">
              <button>create will not show</button>
            </VisibleIf>
            <VisibleIf action="Create" user={userTwo}>
              <button>create will show</button>
            </VisibleIf>
            <VisibleIf action="Create" user={userAdmin}>
              <button>create will show</button>
            </VisibleIf>

            <VisibleIf action="Edit" model={post}>
              <button>edit will not show</button>
            </VisibleIf>
            <VisibleIf action="Edit" model={post} user={userOneActivated}>
              <button>edit will show</button>
            </VisibleIf>
            <VisibleIf action="Edit" model={post} user={userAdmin}>
              <button>edit will show</button>
            </VisibleIf>

            <VisibleIf type="Comment" action="Create" user={userOneActivated}>
              <button>comment create will show</button>
            </VisibleIf>
          </PunditTypeSet>
        </PunditContainer>
      </div>
    );
  }
}

// policies.js

// Simple example
export default {
  Post: (action, model, user) => {
    if (user.activated === false) { return false; }
    if (user.role === 'admin') { return true; }

    switch (action) {
      case 'Create':
        return true;
      case 'Edit':
        return (model.editable && user.id === model.user.id);
      default:
        return false;
    }
  },
  Comment: (action, model, user) => {
    if (user.activated === false) { return false; }
    if (user.role === 'admin') { return true; }

    switch (action) {
      case 'Create':
        return true;
      default:
        return false;
    }
  }
};

// Function based example

import { createPolicy, toPolicyObject } from 'react-pundit';

const PostPolicy = createPolicy('Post');

PostPolicy.addAction('Edit', (model, user) => {
  return user.activated && (user.role === 'admin' || (model.editable && user.id === model.user.id));
});

PostPolicy.addAction('Create', (model, user) => {
  return user.activated;
});

const CommentPolicy = createPolicy('Comment');

CommentPolicy.addAction('Create', (model, user) => {
  return user.activated;
});

export default toPolicyObject([PostPolicy, CommentPolicy]);

// OO example

import { PunditPolicy, toPolicyObject } from 'react-pundit';

class PostPolicy extends PunditPolicy {
  constructor() {
    super('Post');
  }

  Edit(model, user) {
    return user.activated && (user.role === 'admin' || (model.editable && user.id === model.user.id));
  }

  Create(model, user) {
    return user.activated;
  }
}

class CommentPolicy extends PunditPolicy {
  constructor() {
    super('Comment');
  }

  Create(model, user) {
    return user.activated;
  }
}

export default toPolicyObject([new PostPolicy(), new CommentPolicy()]);

API reference

// Available components
import {
  PunditContainer,
  PunditTypeSet,
  VisibleIf
} from 'react-pundit';

// Available helpers
import {
  PunditPolicy,
  createPolicy,
  toPolicyObject,
  PunditComponent
} from 'react-pundit';

PunditContainer

PunditContainer is the root of react-pundit and is where the policies are set. You can pass a user into the container and have that act as the default user for all children that use pundit. The container does not produce DOM.

<PunditContainer policies={policies} user={defaultUser}>
  <div className="App">
  </div>
</PunditContainer>

PunditTypeSet

PunditTypeSet is a convenience tool. It allows you not have to set the type prop on any children in side of it. Those children that do have type set will override this type.

<PunditTypeSet type="DefaultType">
</PunditTypeSet>

VisibleIf

VisibleIf is the base logic unit in react-pundit currently. It takes a number of props.

type : The policy class
action : The method to check against
user : The user whose permission are being checked
model : If needed the model the permissions are being checked against

It works so that if the permissions are met then the child will be rendered else it will not be

PunditComponent

PunditComponent is a base react component that can be extended to create child components that use pundits checks. It does this by haveing all the default params needed to run the checks and exposing passesPermissions which return a boolean true of false for if the user has the permissions required.

Look at the source for VisibleIf for reference.

class VisibleIf extends PunditComponent {

  static displayName = 'VisibleIf';

  render() {
    if (this.passesPermissions()) {
      return this.props.children;
    }
    return null;
  }
}

If you need to extended the prop types or default props its is easy.

static propTypes = {
  ...PunditComponent.propTypes,
  newProp: PropTypes.any,
};

static defaultProps = {
  ...PunditComponent.defaultProps,
  newProp: 'some default',
};

Work in progress

Examples

See examples folder.

Testing changes locally

You can test changes by importing the library directly from a folder:

Do changes to the library
On your test project: npm install /path/to/your/react-pundit/ --save
For easy development, you can npm link react-pundit on your application
And finally npm run compile the react-pundit to have the changes in your application

License

MIT