<CanAccess>

<CanAccess> is the component form of useCan.

It internally uses useCan's return values to provide its functionality.

Passes the given properties to the can method from your access control provider. After, if it returns:

• true, it renders the children.
• false, it renders fallback prop if provided. Otherwise, it renders null.

Refer to Access Control Provider for more information. →

Basic Usage

import { CanAccess } from "@refinedev/core";

const MyComponent = () => (
    <CanAccess
        resource="posts"
        action="edit"
        params={{ id: 1 }}
        fallback={<CustomFallback />}
    >
        <YourComponent />
    </CanAccess>
);

Properties

It's also accepts all the properties of useCan.

fallback

Component to render if useCan returns false. If undefined, it renders null.

<CanAccess fallback={<div>You cannot access this section</div>}>
    <YourComponent />
</CanAccess>

API Reference

Properties