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.

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