@public-ui/react

KoliBri - React-Adapter

Motivation

Provide an adapter for React to use the KoliBri components.

Installation

Install the adapter with npm, pnpm or yarn:

npm i @public-ui/react
pnpm i @public-ui/react
yarn add @public-ui/react

Usage

First, initialize KoliBri with a theme and create a React root:

import { defineCustomElements } from '@public-ui/components/dist/loader';
import { register } from '@public-ui/components';
import { DEFAULT } from '@public-ui/theme-default';

register(DEFAULT, defineCustomElements)
  .then(() => {
    ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  })
  .catch((error) => {
    /* Handle errors */
  });

Then, you can import any component from @public-ui/react and render it within React components:

import React from 'react';
import type { FC } from 'react';
import { KolButton } from '@public-ui/react';

export default (): FC => <KolButton _label="Hello World" />;

For available design tokens see the default theme README.