Build React Library for developers

[reboottime]

Build React Libs for developers

Scope: This article is about building complementary lib or UI components, not building a whole design system from the ground up.

Common requirements:

1. Provide default style and the flexibility in customizing styles
2. Provide an unstyled directive to support resetting all styles

Examples

• Radix UI: headless primitive UI
• Sooner: unStyled directive, provide default styling, overriding support and unstyled directive

[reboottime]

Styling for component lib

Prefer headless UI

Headless UI is a new trend in defining component library stylings since almost every consumer-facing product has its own brand styling.

But if you want to provide a preset style with a customizing possibility, below is the solution.

Preset style with customization possibility

• Apply data property to mitigate style conflicts

To mitigate styling conflicts, the advisable solution is to utilization data properties for style identification, mainly when default customized styles are in place, for example

[data-reach-accordion-button][disabled] {
    cursor: not-allowed;
}

• Style overriding
  • how to organize css variables as the component lib builder
    • apply css variable at the component scope level, for example, the css variables are defined under the [data-sonner-toaster]` scope,
    • or name the css variable with a prefix as your component library name, such as angular material UI
  • how to use it as a component lib user: override the css variables provided by the component lib builder

Style file generation

• output style css file
• Generate CSS in JS code, then append the style into a style markup at runtime.

[reboottime]

Communication Channel

• React context
• Observer pattern: Sonner
• Communication through customized event: Mantine UI notification system

[reboottime]

Package organization

Preferred example: https://github.com/reach/reach-ui