@gyldendal/kobber-components

Component library

Components can be used as react components or as web components.
TypeScript definitions are included.

Installation

Run one of the following commands to add @gyldendal/kobber-components to your project:

npm install @gyldendal/kobber-components

yarn add @gyldendal/kobber-components

You will also need to install react and react-dom

Inter font

The Inter variable font is used by default. It can be installed separately from fontsource with one of these commands:

npm install @fontsource-variable/inter

yarn add @fontsource-variable/inter

And then imported in your project:

import '@fontsource-variable/inter';

Usage

Components can be imported as react components or as web components.

As a react component:

import { ProgressBar } from "@gyldendal/kobber-components/react";
const App = () => <ProgressBar />;

As a custom element:

<script>import "@gyldendal/kobber-components/web-components";</script>
<kobber-progress-bar />

As a web component:

import { ProgressBar } from "@gyldendal/kobber-components/web-components";
const progressBar = new ProgressBar();
document.body.appendChild(progressBar);

CSS

We recommend using normalize.css or something similar to normalize browser styles.

Development

After making a new component, do the following steps to expose it to the world:

1. Export it from src/index.react.tsx and src/index.web-components.ts.
2. Run yarn build.
3. Commit changes, and publish according to changeset.