react-redux-restriction

    1.2.11 • Public • Published

    react-redux-restriction

    react-redux-restriction provides React components which allow redux dependent conditional rendering.

    NPM

    Table of contents

    React, Redux

    This package provides mainly React components. See React for more details.

    It also depends on Redux.

    React Router

    You can use this package with React Router. The Route provides the bindings.

    Reselect

    It is recommended to use Reselect for the condition property.

    You can use it like this:

    import { createSelector } from 'reselect';
     
    const state = { someData: { someOtherData: { a: undefined, b: 'value' } } };
     
    const selectSomeData = state => state.someData;
     
    const selectSomeOtherData = createSelector(
      selectSomeData,
      someData => someData.someOtherData
    );
     
    const selectIsASet = createSelector(
      selectSomeOtherData,
      someOtherData => !!someOtherData.a
    );
     
    <Restriction
      not
      data={selectIsASet}
    >
      This will be rendered
    </Restriction>

    You can also create a selector which depends on a value outside of the store. For this you have two options:

    • Use the makeSelector structure:

      const state = { someData: { someOtherData: { a: 'someVal', b: 'value' } } };
       
      const makeSelectAEquals = (valueToEqual) => createSelector(
        selectSomeOtherData,
        someOtherData => someOtherData.a === valueToEqual
      );
       
      <Restriction data={makeSelectAEquals('someVal')}>
        This will be rendered
      </Restriction>

      Please note that each selector has its own cache so that you may get redundant calls to the state. See Memoized selectors for more details about reselect's memoizing approach.

    • Use props:

      const state = { someData: { someOtherData: { a: 'someVal', b: 'value' } } };
       
      const selectAEqualsValueToEqualProp = createSelector(
        // selector list
        selectSomeOtherData,
        (state, props) => props && props.valueToEqual,
        // reducer
        (someOtherData, valueToEqual) => someOtherData.a === valueToEqual
      );
       
      <Restriction data={selectAEqualsValueToEqualProp} valueToEqual="someVal">
        This will be rendered
      </Restriction>
    • Use by prop:

      const state = { someData: { someOtherData: { a: 'someVal', b: 'value' } } };
       
      const selectA = createSelector(
        selectSomeOtherData,
        someOtherData => someOtherData.a
      );
       
      <Restriction data={selectA} by={value => value === "someVal"}>
        This will be rendered
      </Restriction>

    When would I need this?

    This package provides simple bindings for components which depend on the current state of your application. You could surely also simply use the react-redux connect function directly but then you would need to add code on multiple places only for a simple check

    • you would need to add the connect function and create the corresponding mapStateToProps parameter to your component
    • you would need to add the new prop to your PropTypes
    • you would eventually need to pass the prop down to your dumb component if you have one
    • you would need to add the conditional code itself

    When using react-redux-restriction you only would need to have a selector and the restriction component.

    Typical use cases for this package would be if

    • your navigation would need to adapt to the permissions of the signed in user or if a user is signed in or not
    • you would like to create data filters
    • you would like to restrict routes to e.g. signed in users
    • you would like to alter your state if a specific condition is met and your component is rendered e.g. you would need to receive additional information from your API for your component if the component meets some filters

    Passing children

    This package uses react-resolve-element for passing children.

    Compatibility with React < 16.0

    This package provides a named export for react-resolve-element's supportChildren wrapper. Please look at the compatibility notes for information on how to use it.

    import { supportChildren } from 'react-redux-restriction';

    API

    <Restriction>

    Only renders the underlying children if the condition is met. It also can be used to alter the store based on a condition.

    import Restriction from 'react-redux-restriction';
     
    <Restriction
      not={boolean}
      condition={string | (state, ownProps) => boolean} // deprecated
      data={string | (state, ownProps) => value}
      by={(value) => boolean}
      updateState={(dispatch, ownProps) => void}
      fixState={(dispatch, ownProps) => void}
     
      component={ReactComponent}
      render={(ownProps) => ReactNode}
     
      {...ownProps}
    >
      {ReactNode}
    </Restriction>

    Properties

    • not:boolean

      Specifies whether the condition should be falsy (if set to true) or not. In fact this reverts the result of condition.

    • condition:string | condition(state, ownProps):boolean

      This is deprecated. This prop is now an alias for data but works the same as before if by is not set explicitely.

      Checks the state for a condition. This is ignored if data is set.

      string:

      Dot notated path to the value which should be tested for trueness. For example subState.data.1 with { subState: { data: [ 'a', 'b' ] } } returns 'b' which is truthy whereas subState.data.2 returns undefined which is falsy.

      function:

      • Function parameters
        • state: the current redux state
        • ownProps: the components props beside Restriction specific ones
      • Return value
        • A truthy value if the condition is met, a falsy value otherwise
    • data:string | data(state, ownProps):value

      Resolves data from the state to be checked for a condition. The data is then evaluated by the by prop.

      string:

      Dot notated path to the value which should be resolved. For example subState.data.1 with { subState: { data: [ 'a', 'b' ] } } returns 'b'.

      function:

      • Function parameters
        • state: the current redux state
        • ownProps: the components props beside Restriction specific ones
      • Return value
        • A value to be checked for a condition
    • by(value):boolean

      Checks the value resolved from data or condition for a condition.

      • Function parameters
        • value: the value to be checked
      • Return value
        • True if the condition is met, false otherwise

      Default value: value => value which checks the value for trueness.

    • updateState(dispatch, ownProps):void

      Gets called before the component gets rendered to alter the store if the condition meets the requirements.

      • Function parameters
        • dispatch: the store's dispatch function
        • ownProps: the components props beside Restriction specific ones
    • fixState(dispatch, ownProps):void

      Gets called before the component gets rendered to alter the store if the condition doesn't meet the requirements.

      • Function parameters
        • dispatch: the store's dispatch function
        • ownProps: the components props beside Restriction specific ones
    • component:ReactComponent, render(ownProps):ReactNode, children:ReactNode

      See Passing children

    <RestrictionRoute>

    Wrapps a Route into Restrictions in order to create state dependent conditional routes.

    // Either
    import { RestrictionRoute } from 'react-redux-restriction';
    // Or
    import Restriction from 'react-redux-restriction';
    const RestrictionRoute = Restriction.Route;
     
    <RestrictionRoute
      conditions={[
        {
          not,
          condition, // deprecated
          data,
          by,
          updateState,
          fixState,
          ...ownProps
        },
        ...
      ]}
     
      component={ReactComponent}
      render={(ownProps) => ReactComponent}
     
      {...ownProps}
    >
      {ReactNode}
    </RestrictionRoute>

    Properties

    • conditions:array

      The conditions to be met. Each condition is mapped to a Restriction. They are handled in the order in which they are provided. See Restriction to get further information on which props to pass to the Restrictions in particular. Note that you can also pass custom properties to the individual Restrictions. The ownProps provided directly to the RestrictionRoute also get passed to the individual Restrictions but get overwritten if also set for the specific condition.

    • component:ReactComponent, render(ownProps):ReactNode, children:ReactNode

      See Passing children

    Install

    npm i react-redux-restriction

    DownloadsWeekly Downloads

    20

    Version

    1.2.11

    License

    MIT

    Last publish

    Collaborators

    • 2manyvcos