Ask Question

How can I prevent import of specific component of a library?

I am using Chakra-UI component library and have to create a wrapper <Select> component, since we want to have a custom arrow icon.

Of course the wrapper component has be used for the whole project. Therefore I want to prevent an import of the Chakra-UI <Select>.

What could be the solution for this?

Reactchakraeslintimport

353 views

AuthorΒ΄s AnkiCodes image

AnkiCodes

Last edited on

1 Answer available

Best answer

Assuming you're using ESLint. You can do this πŸ˜‰

"no-restricted-imports": [
    "error",
    {
        paths: [
            {
                name: "@chakra-ui/react",
                importNames: ["Select"],
                message: "Please import 'MySelect' from 'src/components/base/my-select.tsx' instead.",
            },
        ],
    },
],

Now if someone wants to import Select then the IDE would mark the import as an error and on hover he/she would see the message. The best part is that you still can import other component of Chakra without any problem 🀩

More detail about no-restricted-imports