Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common

react components web

TheoryOfNekomata fca1838487 Add value props, fix styling of docs page Add value, defaultValue, and checked props to appropriate elements. Add link to Feather Icons for the Icon component. The styling of TextInput docs has been fixed.		3年前
packages	Add value props, fix styling of docs page	3年前
plop/templates	Update directory structure, generator code	4年前
utilities	Initial commit	4年前
.editorconfig	Initial commit	4年前
.env.example	Add example env file	4年前
.gitignore	Improve navigation on mobile	3年前
.npmignore	Update ignores	3年前
.prettierrc	Improve test coverage	4年前
LICENSE	Add README, LICENSE	4年前
README.md	Add value props, fix styling of docs page	3年前
global.d.ts	Initial commit	4年前
jest.config.js	Add Next.js + MDX support	4年前
jest.setup.ts	Initial commit	4年前
package.json	Add value props, fix styling of docs page	3年前
plopfile.js	Update directory structure, generator code	4年前
rollup.config.js	Update directory structure, generator code	4年前
tsconfig.json	Update ignores	3年前
yarn.lock	Update docs	3年前

README.md

Tesseract Design - React Common

Common front-end components for Web using the Tesseract design system, written for React.

Package:

Dependencies:

Check the documentation for more details.

Installation

This package resides primarily in the Modal.sh JavaScript Package Registry. You will need to adjust configuration in your chosen package manager.

With Yarn v.1.x, add this to your .yarnrc file:

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

Then, install the package by running the following command:

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:

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
          label="Username"
        />
      </div>
      <div>
        <T.TextInput
          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)

Detailed usage guides can be found in the documentation linked above.

TypeScript

The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the compiled source.

License

MIT. See the LICENSE file on the package repository for the full text.