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.

README.md 1.2 KiB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. # Tesseract Design - React Common
  2. Check the [documentation](https://make.modal.sh/tesseract/web/react/common) for more details.
  3. ## Usage
  4. The package includes components as named exports. Simply import the components you need individually or use a namespace
  5. import, like so:
  6. ```jsx harmony
  7. import * as React from 'react'
  8. import ReactDOM from 'react-dom'
  9. import * as T from '@tesseract-design/react-common'
  10. const LoginForm = etcProps => (
  11. <form
  12. {...etcProps}
  13. >
  14. <fieldset>
  15. <legend>
  16. Log In
  17. </legend>
  18. <div>
  19. <T.TextInput
  20. name="username"
  21. label="Username"
  22. />
  23. </div>
  24. <div>
  25. <T.TextInput
  26. name="password"
  27. type="password"
  28. label="Password"
  29. />
  30. </div>
  31. <div>
  32. <T.Button>
  33. Log In
  34. </T.Button>
  35. </div>
  36. </fieldset>
  37. </form>
  38. )
  39. const mountNode = window.document.createElement('div')
  40. ReactDOM.render(
  41. <LoginForm />,
  42. mountNode,
  43. )
  44. window.document.body.appendChild(mountNode)
  45. ```
  46. ## TypeScript
  47. The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
  48. compiled source.