@vitalsource/vstui NPM

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!

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

@everything-registry/sub-chunk-987 @zalastax/nolb-_vit

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

5 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

8 months ago

6 months ago

9 months ago

9 months ago

9 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago