@amollo-kit/components-override
v1.0.2
Published
Reusable react components with the overrides pattern
Downloads
10
Maintainers
Readme
components-override
Reusable react components with the overrides pattern
The template for use in react components was implemented from an article by David Schnurr. For good experience, use it with typescript.
Installation
- npm
npm install @amollo-kit/components-override
- yarn
yarn add @amollo-kit/components-override
Criteria requirement
- Typescript can recognize types by default.
- If a component is passed, then the parameter typing should be for the parameters of this component.
- Don't skip more components not requiring the component to be overridden
- The overridden component must be generic
Usage
Reusable component:
import type { Override } from "@amollo-kit/components-override";
import { getComponentsWithOverride } from "@amollo-kit/components-override";
import * as defaultComponents from "./components";
type DefaultComponentsType = typeof defaultComponents;
export interface BoxInputProps<T extends Record<string, unknown>> {
overrides: Override<T, DefaultComponentsType>;
}
/**
* @description must be a generic component
*/
const BoxInput = <T extends Record<string, unknown>>({
overrides,
}: BoxInputProps<T>) => {
....
const {
Root: { component: Root, props: rootProps },
Input: { component: Input, props: inputProps },
} = getComponentsWithOverride<DefaultComponentsType, T>(defaultComponents, overrides);
return (
<Root {...sharedProps} {...rootProps}>
<Input
type="text"
value={query}
onChange={onInputChange}
{...sharedProps}
{...inputProps}
/>
</Root>
);
};
export default BoxInput;
Component call:
<BoxInput
overrides={{
Root: {
props: { "aria-label": "Select an option" },
},
Input: {
component: TextField,
props: {
type: "text",
draggable: true,
},
}
}}
/>