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?
2520 views
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