SpecificPermAccessControl

SpecificPermAccessControl is used to conditionally render other components (which we call access-controlled components) based on a single or multiple specific permissions.

Use this component either by wrapping access-controlled components in it:

<SpecificPermAccessControl perm='cuba.restApi.fileUpload.enabled'>
  <button>Upload File</button>
</SpecificPermAccessControl>

or by providing a render prop:

<SpecificPermAccessControl perm='cuba.restApi.fileUpload.enabled'
                           render={disabled => <button disabled={disabled}>Upload File</button>}
/>

If both are provided, render prop takes precedence.

In either example the button will only be shown when a user has a permission to upload files.

To specify multiple required permissions, use an array:

<SpecificPermAccessControl perm={['cuba.restApi.fileUpload.enabled', 'some.custom.specific.permission']}>
  <button>Upload File</button>
</SpecificPermAccessControl>

Instead of hiding the access-controlled components you can specify to render them as disabled by setting mode prop to disable. If mode is disable:

  • If render prop is used, it will receive true as its disabled parameter.

  • Otherwise a prop with name disabled (can be configured via disabledPropName prop) and value true (can be configured via disabledPropValue prop) will be passed to each child.


See also: