KoliBri - React-Adapter

Motivation

Provide an adapter for React to use the KoliBri components.

Installation

You can install the adapter with npm, pnpm or yarn:

1npm i -g @public-ui/react
2pnpm i -g @public-ui/react
3yarn add -g @public-ui/react

Usage

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

1import { defineCustomElements } from '@public-ui/components/dist/loader';
2import { register } from '@public-ui/components';
3import { DEFAULT } from '@public-ui/theme-default';
4
5register(DEFAULT, defineCustomElements)
6  .then(() => {
7    ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
8      <React.StrictMode>
9        <App />
10      </React.StrictMode>
11    );
12  })
13  .catch((error) => {
14    /* Handle errors */
15  });

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

1import React from 'react';
2import type { FC } from 'react';
3import { KolButton } from '@public-ui/react';
4
5export default (): FC => <KolButton _label="Hello World" />;