npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-pundit

v2.0.0

Published

React components to build permission controlled ui's.

Downloads

11

Readme

react-pundit

Downloads Downloads npm version dependencies dev dependencies License Build Status Code Climate Test Coverage

React components to build permission controlled ui's.

With inspiration from Pundit.

Pre-requisites

This lib returns arrays of elements in render so requires react >= 16. If you are using a lower version of react use version 1.x.x of this lib.

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,
  IfElseButton
} 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 will only create DOM if there is more then one child inside it. It creates a 'div' by default in that case but you can override with a element prop ie: element="span" or element={Wrapper}.

<PunditContainer policies={policies} user={optionalDefaultUser}>
  <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 as well as the model. Those children that do have type set will override this type, the same is true for model. The type set will only create DOM if there is more then one child inside it. It creates a 'span' by default in that case but you can override with a element prop ie: element="div" or element={Wrapper}.

<PunditTypeSet type="DefaultType" model={optionalDefaultModel}>
</PunditTypeSet>

VisibleIf

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

  • type : The policy class
  • action || method : 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

IfElseButton

IfElseButton is a button that has two click handlers one ifClick that will trigger if the user has permission and a elseClick if they do not. The button will always have the class IfElseButton but you can add classes via the className prop.

All Props:

  • type : The policy class
  • action || method : The method to check against
  • user : The user whose permission are being checked
  • model : If needed the model the permissions are being checked against
  • ifClick : Function triggered if the user has permission and has clicked the button
  • elseClick : Function triggered if the user does not have permission and has clicked the button
  • className : Extra custom class to add to the button element
  • element : Optional component to use to override the default 'button' element

Any other props passed in will be passed to the rendering element.

Example: In this case the user has to be logged in and activated to do the action but the button is on a public facing page. We also use a custom Button component to handle the render and a prop that will be passed to it.

<IfElseButton
  type="Post"
  action="ToggleLike"
  model={post}
  ifClick={() => this.toggleLike(post)}
  elseClick={() => this.hasUser ? this.openModal('Please activate your account.') : this.openLogin)}
  element={Button}
  propSpecificToTheButton="Some Value"
>
  {count} Likes
</IfElseButton>
class PostPolicy extends PunditPolicy {
  constructor() {
    super('Post');
  }

  ToggleLike(model, user) {
    return user !== null && user.activated;
  }

  ...
}

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. This is a bit cleaner not handling the case of more than one child.

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:

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

License

MIT