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 8cef8cb7c7 Update README Correctly refer to versions in badges.		4 yıl önce
docs	Update documentation	4 yıl önce
lib	Explicitly define available props for components	4 yıl önce
plop/templates/component	Initial commit	4 yıl önce
utilities	Initial commit	4 yıl önce
.editorconfig	Initial commit	4 yıl önce
.env.example	Add example env file	4 yıl önce
.gitignore	Add docs content, adjust component props and metrics	4 yıl önce
.npmignore	Improve test coverage	4 yıl önce
.prettierrc	Improve test coverage	4 yıl önce
LICENSE	Add README, LICENSE	4 yıl önce
README.md	Update README	4 yıl önce
global.d.ts	Initial commit	4 yıl önce
jest.config.js	Initial commit	4 yıl önce
jest.setup.ts	Initial commit	4 yıl önce
package.json	Update README	4 yıl önce
plopfile.js	Initial commit	4 yıl önce
rollup.config.js	Update rollup	4 yıl önce
tsconfig.json	Update build structure	4 yıl önce
yarn.lock	Add missing dependency, update base URI	4 yıl önce

README.md

Tesseract Web - React Common

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

Package:

Dependencies:

Installation

Since this package resides in the Modal.sh JavaScript Package Registry, you may need to adjust configuration in your chosen package manager.

With Yarn, 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
          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)

Detailed usage guides can be found in the Tesseract Design - React Common documentation.

TypeScript

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