Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

README.md 2.8 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://pack.modal.sh/js/-/web/detail/@tesseract-design/react-common)
  5. [![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://pack.modal.sh/js/-/web/detail/@tesseract-design/react-common#versions)
  6. Dependencies:
  7. [![React](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=react&kind=dependencies)](https://github.com/facebook/react)
  8. [![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=dependencies)](https://github.com/styled-components/styled-components)
  9. [![TypeScript](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=typescript&kind=devDependencies)](https://github.com/microsoft/typescript)
  10. [![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
  11. [![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)
  12. ## Installation
  13. Since this package resides in the [Modal.sh JavaScript Package Registry](https://pack.modal.sh/js/), you may need to
  14. adjust configuration in your chosen package manager.
  15. With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:
  16. ```
  17. "@tesseract-design:registry" "https://pack.modal.sh/js/"
  18. ```
  19. Then, install the package by running the following command:
  20. ```shell script
  21. yarn add @tesseract-design/react-common
  22. ```
  23. ## Usage
  24. The package includes components as named exports. Simply import the components you need individually or use a namespace
  25. import, like so:
  26. ```jsx harmony
  27. import * as React from 'react'
  28. import ReactDOM from 'react-dom'
  29. import * as T from '@tesseract-design/react-common'
  30. const LoginForm = etcProps => (
  31. <form
  32. {...etcProps}
  33. >
  34. <fieldset>
  35. <legend>
  36. Log In
  37. </legend>
  38. <div>
  39. <T.TextInput
  40. block
  41. label="Username"
  42. />
  43. </div>
  44. <div>
  45. <T.TextInput
  46. block
  47. type="password"
  48. label="Password"
  49. />
  50. </div>
  51. <div>
  52. <T.Button>
  53. Log In
  54. </T.Button>
  55. </div>
  56. </fieldset>
  57. </form>
  58. )
  59. const mountNode = window.document.createElement('div')
  60. ReactDOM.render(
  61. <LoginForm />,
  62. mountNode,
  63. )
  64. window.document.body.appendChild(mountNode)
  65. ```