77 lines
1.8 KiB
Plaintext
77 lines
1.8 KiB
Plaintext
|
---
|
||
|
|
name: Getting Started
|
||
|
|
route: /getting-started
|
||
|
|
---
|
||
|
|
|
||
|
|
# Getting Started
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
> This component library is pre- v1.0. All realeases until a v1.0 have the
|
||
|
|
> possibility of introducing breaking changes. Please depend on an "exact"
|
||
|
|
> version in your projects to prevent issues caused by loose versioning.
|
||
|
|
|
||
|
|
Install `react-viewerbase` from npm:
|
||
|
|
|
||
|
|
```shell
|
||
|
|
// with npm
|
||
|
|
npm i react-viewerbase --save-exact
|
||
|
|
|
||
|
|
// with yarn
|
||
|
|
yarn add react-viewerbase --exact
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
There is some setup required for `react-viewerbase`. We are working to eliminate
|
||
|
|
these requirements with the goal of providing ready to use components.
|
||
|
|
|
||
|
|
### External Dependencies
|
||
|
|
|
||
|
|
We have tried to keep the number of external dependencies limited to make setup
|
||
|
|
as easy as possible. You will, however, need to include either the default font
|
||
|
|
or the font you set for your theme:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// Google Fonts, Sanchez & Roboto
|
||
|
|
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap';
|
||
|
|
```
|
||
|
|
|
||
|
|
React Viewerbase also looks for theme CSS variabled defined on `:root`. You can
|
||
|
|
find a list of variables [on the theming page](/styling-and-theming)
|
||
|
|
|
||
|
|
### Import & Use
|
||
|
|
|
||
|
|
You can use components in your React app:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
import { LayoutButton } from 'react-viewerbase';
|
||
|
|
|
||
|
|
class Example extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
selectedCell: {
|
||
|
|
className: 'hover',
|
||
|
|
col: 1,
|
||
|
|
row: 1,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<LayoutButton
|
||
|
|
selectedCell={this.state.selectedCell}
|
||
|
|
onChange={cell => this.setState({ selectedCell: cell })}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
> NOTE: It is heavily recommended that you use a CSS reset or normalize. As well
|
||
|
|
> as the following style: `* { Box-sizing: Border-box }`
|