@amollo-kit/components-override

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,
                },
            }
        }}
    />