@8base-react/permissions-provider
v1.7.2
Published
The Table Schema Provider fetching list of 8base table schemas and provide it via React Context.
Downloads
424
Readme
8base Table Schema Provider
The Table Schema Provider fetching list of 8base table schemas and provide it via React Context.
API
Table of Contents
PermissionsProvider
Extends React.Component
Provider for 8base user permissions
Properties
children
Function Children of the provider. Could be either react node or function with loading state.
Usage
Programatic usage
import React from 'react';
import { PermissionsProvider, PermissionContext, isAllowed } from '@8base/permission-provider';
class MyComponent extends React.Component {
static contextType = PermissionContext;
render() {
const allowed = isAllowed({
resource: 'schema',
type: 'custom',
permission: 'edit'
}, this.context);
return <Button disabled={!allowed}>Edit Schema!</Button>
}
}
const Application = () => (
<PermissionsProvider>
{
({ loading }) => loading ? 'Loading...' : (
<MyComponent />
)
}
</PermissionsProvider>
);
Conditional rendering by schema permission
import React from 'react';
import { PermissionsProvider, IfAllowed } from '@8base/permission-provider';
const MyComponent = () => (
<IfAllowed permissions={[['custom', 'schema', 'edit']]}>
<Button>Edit Schema!</Button>
</IfAllowed>
);
const Application = () => (
<PermissionsProvider>
{
({ loading }) => loading ? 'Loading...' : (
<MyComponent />
)
}
</PermissionsProvider>
);
Conditional rendering by data permission
import React from 'react';
import { IfAllowed } from '@8base/permission-provider';
const MyComponent = () => (
<IfAllowed permissions={[['data', 'Clients', 'create']]}>
<Button>Create Client!</Button>
</IfAllowed>
);
const Application = () => (
<PermissionsProvider>
{
({ loading }) => loading ? 'Loading...' : (
<MyComponent />
)
}
</PermissionsProvider>
);
Usage with render props
import React from 'react';
import { IfAllowed } from '@8base/permission-provider';
const MyComponent = () => (
<IfAllowed permissions={[['custom', 'schema', 'edit']]}>
{
(allowed) => <Button disabled={!allowed}>Edit Schema!</Button>
}
</IfAllowed>
);
const Application = () => (
<PermissionsProvider>
{
({ loading }) => loading ? 'Loading...' : (
<MyComponent />
)
}
</PermissionsProvider>
);