TypeUI

Bootstrap getting old hat? SemanticUI too heavy? Prefer React and TypeScript? TypeUI is a suite of UI components built in 100% TypeScript. It's light-weight, and it uses styled-components to allow you to serve everything as a single JavaScript file.

Installation

npm install @independent-software/typeui --save
yarn add @independent-software/typeui
bower install @independent-software/typeui --save

Documentation

Storybook available as GitHub pages.

Projects

You can see TypeUI in action on recharts.online.

Usage

This package has a built-in theme, which must be passed on to any controls your app uses. You can derive new themes from the default theme. The required imports are:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { ThemeProvider } from 'styled-components'
import { Theme } from '@independent-software/typeui/styles/Theme'

This React app uses a single component Button:

import { Button } from '@independent-software/typeui/controls/Button'

ReactDOM.render(
  (<React.Fragment>
    <ThemeProvider theme={Theme}>
      <Button>Click me!</Button>
    </ThemeProvider>
  </React.Fragment>),
  document.getElementById('root')
); 

Optionally, you can use the component <StyleReset/> to perform a global CSS reset, if your app is not already doing this. In addition, <StyleBase> sets up some optional base styles:

import { StyleReset } from '@independent-software/typeui/styles/StyleReset'
import { StyleBase } from '@independent-software/typeui/styles/StyleBase'
import { Button } from '@independent-software/typeui/controls/Button'

ReactDOM.render(
  (<React.Fragment>
    <StyleReset/>
    <StyleBase/>
    <ThemeProvider theme={Theme}>
      <Button>Click me!</Button>
    </ThemeProvider>
  </React.Fragment>),
  document.getElementById('root')
);

This project was built in TypeScript and comes with TypeScript type definitions, so it's not necessary to install these separately.

Notes

Tree shaking

The ES2015 import statements in this package are structured in a way that promotes tree shaking in Webpack. If an application imports only a few components from this library, then (for production builds) Webpack will not include the unused components, which can greatly reduce the size of the application package.

This import statement will import just the Button component:

import { Button } from '@independent-software/typeui/controls/button'

For tree shaking to work, be sure to set the following in your Webpack config file:

optimization: {
  usedExports: true
}

as well as mode: 'production'.