@vitalsource/vstui
v5.0.0-beta.6
Published
React components based off the VST Pattern Library
Downloads
703
Keywords
Readme
vstui
vstui is a set of React components based off the VitalSource Pattern Library. 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 to see what has changed in each release.
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.
yarn add @vitalsource/vstui
# don't forget to install any missing peer dependencies!or
npm install @vitalsource/vstui
# don't forget to install any missing peer dependencies!Embed fonts
vstui uses the font Roboto, but it's not included as part of this package.
To embed Roboto into a webpage, copy this code into the <head> of your HTML document.
Note: This doesn't work in China, so it might be a good idea to self-host the font.
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
rel="stylesheet"
/>Usage
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 (
<ThemeProvider theme={theme}>
{
// 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
}
<div>
<Button>Button with magic theme</Button>
<Button secondary>Button with sangria theme</Button>
</div>
</ThemeProvider>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
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 folder for the list of currently supported languages.
...
import { es } from "@vitalsource/vstui/i18n/translations";
const theme = createTheme({
i18n: es
});
...
See a full working example here:
Supported browsers
The browsers we support are the same as the browsers supported by Bookshelf Online
Contributing
If you'd like to help out developing these components, please see the contribution guidelines.
Related Projects
- a11y-dialog A very lightweight and flexible accessible modal dialog.
- formik Build forms in React, without the tears 😭
- material-ui React components that implement Google's Material Design.
- react-popper React wrapper around Popper.js