Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. # Tesseract Web - React Common
  2. Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org).
  3. Package:
  4. [![@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)
  5. Dependencies:
  6. [![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)
  7. [<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)
  8. [![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)
  9. [![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)
  10. [![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)
  11. ## Installation
  12. Since this package resides in the [Modal.sh JavaScript Package Registry](https://pack.modal.sh/js/), you may need to
  13. adjust configuration in your chosen package manager.
  14. With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:
  15. ```
  16. "@tesseract-design:registry" "https://pack.modal.sh/js/"
  17. ```
  18. Then, install the package by running the following command:
  19. ```shell script
  20. yarn add @tesseract-design/react-common
  21. ```
  22. ## Usage
  23. The package includes components as named exports. Simply import the components you need individually or use a namespace
  24. import, like so:
  25. ```jsx harmony
  26. import * as React from 'react'
  27. import ReactDOM from 'react-dom'
  28. import * as T from '@tesseract-design/react-common'
  29. const LoginForm = etcProps => (
  30. <form
  31. {...etcProps}
  32. >
  33. <fieldset>
  34. <legend>
  35. Log In
  36. </legend>
  37. <div>
  38. <T.TextInput
  39. block
  40. label="Username"
  41. />
  42. </div>
  43. <div>
  44. <T.TextInput
  45. block
  46. type="password"
  47. label="Password"
  48. />
  49. </div>
  50. <div>
  51. <T.Button>
  52. Log In
  53. </T.Button>
  54. </div>
  55. </fieldset>
  56. </form>
  57. )
  58. const mountNode = window.document.createElement('div')
  59. ReactDOM.render(
  60. <LoginForm />,
  61. mountNode,
  62. )
  63. window.document.body.appendChild(mountNode)
  64. ```