mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 19:44:21 +00:00
47 lines
No EOL
1.1 KiB
Markdown
47 lines
No EOL
1.1 KiB
Markdown
# `bluelib-react`
|
|
|
|
React bindings for [`bluelib@4`](https://github.com/Steffo99/bluelib)
|
|
|
|
## Documentation
|
|
|
|
An interactive documentation for `bluelib-react` is available [here](http://gh.steffo.eu/bluelib-react/), built using [Storybook](https://storybook.js.org/).
|
|
|
|
## Installation
|
|
|
|
You can download `bluelib-react` using your favourite node package manager:
|
|
|
|
```console
|
|
$ npm install --save @steffo/bluelib-react
|
|
```
|
|
|
|
```console
|
|
$ yarn add @steffo/bluelib-react
|
|
```
|
|
|
|
Ensure you have `react` and `react-dom` installed, as they are peer dependencies of this package and aren't installed automatically.
|
|
|
|
## Usage
|
|
|
|
You can import the components you want to use using the ES6 import syntax:
|
|
|
|
```js
|
|
import { Box } from "@steffo/bluelib-react"
|
|
```
|
|
|
|
**All** Bluelib components must be **inside a `<Bluelib>` container** for them to work correctly!
|
|
|
|
```jsx
|
|
import { Bluelib, Heading, Box } from "@steffo/bluelib-react"
|
|
|
|
|
|
const MyComponent = props => (
|
|
<Bluelib theme={"royalblue"}>
|
|
<Heading level={1}>
|
|
Hello world!
|
|
</Heading>
|
|
<Box>
|
|
Welcome to Bluelib!
|
|
</Box>
|
|
</Bluelib>
|
|
)
|
|
``` |