# gu-ds-components

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

Latest version **0.0.9** (published 2023-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install gu-ds-components
pnpm add gu-ds-components
yarn add gu-ds-components
bun add gu-ds-components
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2023-11-07 |
| First published | 2023-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | dsreitan |

## Links

- npm: https://www.npmjs.com/package/gu-ds-components
- Repository: https://github.com/GyldendalDigital/gu-ds
- Homepage: https://github.com/GyldendalDigital/gu-ds#readme
- Issues: https://github.com/GyldendalDigital/gu-ds/issues
- npm.io page: https://npm.io/package/gu-ds-components

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [gu-ds-base](https://npm.io/package/gu-ds-base.md) *
- [@r2wc/react-to-web-component](https://npm.io/package/@r2wc/react-to-web-component.md) ^2.0.2

## Recent versions

- 0.0.9 (latest) — 2023-11-07
- 0.0.8 — 2023-11-02
- 0.0.7 — 2023-10-18
- 0.0.5 — 2023-10-09
- 0.0.4 — 2023-10-09
- 0.0.3 — 2023-10-05
- 0.0.2 — 2023-09-15
- 0.0.1 — 2023-09-15

## README

# Component library

Components can be used as react components or as web components.<br />
TypeScript definitions are included.

## Installation

Run one of the following commands to add gu-ds-components to your project:


```
npm install gu-ds-components
```

```
yarn add gu-ds-components
```

You will also need to install 
[react](https://www.npmjs.com/package/react) and
[react-dom](https://www.npmjs.com/package/react-dom)

## Inter font

The Inter variable font is used by default.
It can be installed separately from [fontsource](https://fontsource.org/fonts/inter/) with one of these commands:


```
npm install @fontsource-variable/inter
```

```
yarn add @fontsource-variable/inter
```

And then imported in your project:

```JavaScript
import '@fontsource-variable/inter';
```

## Usage

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

As a react component:

```jsx
import { ProgressBar } from "gu-ds-components/react";
const App = () => <ProgressBar />;
```

As a custom element:

```html
<script>import "gu-ds-components/web-components";</script>
<gu-ds-progress-bar />
```

As a web component:

```JavaScript
import { ProgressBar } from "gu-ds-components/web-components";
const progressBar = new ProgressBar();
document.body.appendChild(progressBar);
```

## CSS

CSS can be imported in JavaScript if supported by your bundler:

```JavaScript
import "gu-ds-components/css/components.css";
```

<mark>
Kanskje vi bør inkludere vår egen css baseline i stedet for dette? ↓
<br />
Slik som https://mui.com/material-ui/react-css-baseline/</mark>

gu-ds-components assumes that `box-sizing` is set to `border-box`:

```css
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
```

We recommend using [normalize.css](https://github.com/necolas/normalize.css/) or something similar to normalize browser styles.

---
_Source: https://npm.io/package/gu-ds-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._