|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- # 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'react'%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)
- [![Styled Components](https://img.shields.io/badge/dynamic/json?color=DB7093&label=styled-components&query=%24.dependencies%5B'styled-components'%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/styled-components/styled-components)
- [![TypeScript](https://img.shields.io/badge/dynamic/json?color=007ACC&label=typescript&query=%24.devDependencies%5B'typescript'%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'jest'%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'rollup'%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)
- ```
|