# vstui
vstui is a set of React components based off the [VitalSource Pattern Library](http://design.vitalsource.com/). The goal of this project is to have a solid set of accessible components that follow our style guidelines.
You can check the [release notes](https://github.com/vitalsource/vstui/releases) to see what has changed in each release.
- [Getting started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Localization](#localization)
- [Supported browsers](#supported-browsers)
- [Contributing](#contributing)
- [Related Projects](#related-projects)
## Getting started
### Installation
#### Download
To download vstui, run one of the following from the command line. **Make sure to look at the output, and install any missing peer dependencies.**
```bash
npm install @vitalsource/vstui
# don't forget to install any missing peer dependencies!
```
#### Embed fonts
vstui uses the font [Roboto](https://fonts.google.com/specimen/Roboto), but it's not included as part of this package.
To embed Roboto into a webpage, copy this code into the `` of your HTML document.
**Note:** This doesn't work in China, so it might be a good idea to self-host the font.
```html
```
### Usage
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { magic, sangria } from '@vitalsource/vstui/colors';
import { createTheme, ThemeProvider } from '@vitalsource/vstui/themes';
import { Button } from '@vitalsource/vstui';
const theme = createTheme({
color: {
primary: magic,
secondary: sangria,
},
});
function App() {
return (
{
// This is where all your site code goes
// The theme prop will get passed down to all vstui components,
// even when they are multiple levels deep
}
);
}
ReactDOM.render(, document.getElementById('root'));
```
[](https://codesandbox.io/s/vstui-readme-demo-frr2y?fontsize=14)
### Localization
Messages included with vstui (things like default form validation messages) are translated into all the languages supported by Bookshelf.
It is important to update your theme to reflect your app's current locale. It's highly recommended to dynamically load these languages or only bundle those that you require - loading them all amounts to about 20kb gzipped.
See the [translations](/translations) folder for the list of currently supported languages.
```jsx
...
import { es } from "@vitalsource/vstui/i18n/translations";
const theme = createTheme({
i18n: es
});
...
```
See a full working example here:
[](https://codesandbox.io/s/vstui-i18n-demo-nco2f?fontsize=14)
### Supported browsers
The browsers we support are the same as the [browsers supported by Bookshelf Online](https://support.vitalsource.com/hc/en-us/articles/201949723-Bookshelf-Online-Browser-Support-Policy)
## Contributing
If you'd like to help out developing these components, please see the [contribution guidelines](CONTRIBUTING.md).
## Related Projects
- [a11y-dialog](https://github.com/edenspiekermann/a11y-dialog) A very lightweight and flexible accessible modal dialog.
- [formik](https://github.com/jaredpalmer/formik) Build forms in React, without the tears ðŸ˜
- [material-ui](https://github.com/mui-org/material-ui) React components that implement Google's Material Design.
- [react-popper](https://github.com/FezVrasta/react-popper) React wrapper around Popper.js