React Components

Theme Provider

Many of the React components require a parent ThemeProvider. This provides information such as the default Button shape and how to access translations.

To apply, simply wrap your React application:

      <ThemeProvider>
        <App />
      </ThemeProvider>
  

Styles

The TDS React components are styled with Tailwind. You can either include Tailwind in your application's build or include the generated CSS stylesheet; both options should work just fine.

Using Tailwind requires you to point it in the direction of the components' distribution folder, something like this:

    module.exports = {
      content: [
        // ... your application's templates
        path.resolve(__dirname, "./node_modules/@viewthespace/components/**/*.{ts,tsx}"),
      ],
    }
  

Using the generated stylesheet is straightforward (example in SASS):

    @import "../node_modules/@viewthespace/components/generated/style.css";
  

Translations

There is minimal text in the TDS components; however, what little exists needs to be translatable by the consumer. (TDS will fallback to its own English translations absent a custom translation function.) To configure translations in your React app, pass a translate function to your ThemeProvider. This function accepts a translation key and an optional hash of values to pass.

    <ThemeProvider translate={(key: string, values?: { [valueKey: string]: string }) => {
      return i18next.t(key, values);
    }}>
      <App />
    </ThemeProvider>
  

You can find a list of all keys here.