Build a custom styled component library

[cpatti97100]

Hello,

I am currently working on building a custom component library and I would like to validate my approach. I am using React and have started by creating a custom Button component that wraps a base button from react-aria-components. Here is the code for my Button component (do not mind TS, that is WIP):

// @ts-nocheck
import { forwardRef } from "react";
import { Button as BaseButton } from "react-aria-components";

import styles from "./button.module.css";

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}

export const Button = forwardRef(function Button(
  { children, ...other }: ButtonProps,
  ref
): JSX.Element {
  return (
    <BaseButton ref={ref} className={styles.reactAriaButton}>
      {children}
    </BaseButton>
  );
});

Button.displayName = "Button";

My plan is to follow this pattern for other components as well, wrapping base components from react-aria-components and adding my own styles and additional props as needed.

Is this a good approach for building a custom component library? Are there any potential issues or improvements you would suggest?

Thank you for your help and the awesome work you did here :)

[reidbarber]

That looks like the right way to go. You may also want to check out the Starter kit.

[binaryartifex]

@reidbarber i notice in the starter kit that there's no forwardRef'd components. I was of the opinion (to extend on @cpatti97100's example) that its good practice in the scope of developing consumer libraries to expose a ref for each component, as well as for dealing with third party integration for things like react-hook-form although in that instance its certainly not a deal breaker. Is it ok to move forward without forwardRef integration without worrying if its gonna bite me in the ass down the track?

[reidbarber]

I think using forwardRef is a good idea. We could probably update the starter to include it, but I think we just wanted to have a simple starting point.

[binaryartifex]

actually just to extend on that, would the forwardRefs be targeting the container components or the 'value' components? ie. for components like TextField, SearchField, Select, etc. would the forwardRef be getting injected into the wrapped RAC TextArea or the Input component? the wrapped RAC Select or the underlying button? at the moment ive got the forwardRefs being injected into the main RAC wrapper for a given component, not entirely sure on the implications of doing it either way tbh...

[reidbarber]

I would recommend putting it on the container.

[snowystinger]

You can use https://react.dev/reference/react/useImperativeHandle to add things like focus/blur/select which react hook forms and others may need.
You could also expose inputRef in addition to the forwardRef.