# Tesseract Web - React Common

Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org).

Package:

[![@tesseract-design/react-common](https://img.shields.io/badge/dynamic/json?color=C78AB3&label=@tesseract-design/react-common&query=%24.version&url=https%3A%2F%2Fcode.modal.sh%2Ftesseract-design%2Freact-common%2Fraw%2Fbranch%2Fmaster%2Fpackage.json&style=flat-square&labelColor=666666)](https://pack.modal.sh/js/@tesseract-design/react-common)

Dependencies:

[![React](https://img.shields.io/badge/dynamic/json?color=61DAFB&label=react&query=%24.dependencies%5B%27react%27%5D&url=https%3A%2F%2Fcode.modal.sh%2Ftesseract-design%2Freact-common%2Fraw%2Fbranch%2Fmaster%2Fpackage.json&style=flat-square&labelColor=666666&logo=React&logoColor=ffffff)](https://github.com/facebook/react)
[<img src="https://img.shields.io/badge/dynamic/json?color=DB7093&label=styled-components&query=%24.dependencies%5B%27styled-components%27%5D&url=https%3A%2F%2Fcode.modal.sh%2Ftesseract-design%2Freact-common%2Fraw%2Fbranch%2Fmaster%2Fpackage.json&style=flat-square&labelColor=666666&logo=React&logoColor=ffffff" alt="Styled Components">](https://github.com/styled-components/styled-components)
[![TypeScript](https://img.shields.io/badge/dynamic/json?color=007ACC&label=typescript&query=%24.devDependencies%5B%27typescript%27%5D&url=https%3A%2F%2Fcode.modal.sh%2Ftesseract-design%2Freact-common%2Fraw%2Fbranch%2Fmaster%2Fpackage.json&style=flat-square&labelColor=666666&logo=TypeScript&logoColor=ffffff)](https://github.com/facebook/react)
[![Jest](https://img.shields.io/badge/dynamic/json?color=C21325&label=jest&query=%24.devDependencies%5B%27jest%27%5D&url=https%3A%2F%2Fcode.modal.sh%2Ftesseract-design%2Freact-common%2Fraw%2Fbranch%2Fmaster%2Fpackage.json&style=flat-square&labelColor=666666&logo=Jest&logoColor=ffffff)](https://github.com/facebook/jest)
[![Rollup](https://img.shields.io/badge/dynamic/json?color=EC4A3F&label=rollup&query=%24.devDependencies%5B%27rollup%27%5D&url=https%3A%2F%2Fcode.modal.sh%2Ftesseract-design%2Freact-common%2Fraw%2Fbranch%2Fmaster%2Fpackage.json&style=flat-square&labelColor=666666&logo=rollup.js&logoColor=ffffff)](https://github.com/facebook/jest)

## Installation

Since this package resides in the [Modal.sh JavaScript Package Registry](https://pack.modal.sh/js/), you may need to
adjust configuration in your chosen package manager.

With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:

```
"@tesseract-design:registry" "https://pack.modal.sh/js/"
```

Then, install the package by running the following command:

```shell script
yarn add @tesseract-design/react-common
```

## Usage

The package includes components as named exports. Simply import the components you need individually or use a namespace
import, like so:

```jsx harmony
import * as React from 'react'
import ReactDOM from 'react-dom'
import * as T from '@tesseract-design/react-common'

const LoginForm = etcProps => (
  <form
    {...etcProps}
  >
    <fieldset>
      <legend>
        Log In
      </legend>
      <div>
        <T.TextInput
          block
          label="Username"
        />
      </div>
      <div>
        <T.TextInput
          block
          type="password"
          label="Password"
        />
      </div>
      <div>
        <T.Button>
          Log In
        </T.Button>
      </div>
    </fieldset>
  </form>
)

const mountNode = window.document.createElement('div')

ReactDOM.render(
  <LoginForm />,
  mountNode,
)

window.document.body.appendChild(mountNode)
```