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 3.2 KiB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. # Tesseract Design - 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://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
  5. [![Version List](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/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=peerDependencies)](https://github.com/facebook/react)
  8. [![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=peerDependencies)](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. Check the [documentation](https://make.modal.sh/tesseract/web/react/common) for more details.
  13. ## Installation
  14. This package resides primarily in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/). You will need to
  15. adjust configuration in your chosen package manager.
  16. With [Yarn v.1.x](https://classic.arnpkg.com), add this to your `.yarnrc` file:
  17. ```yarnrc
  18. "@tesseract-design:registry" "https://js.pack.modal.sh/"
  19. ```
  20. Then, install the package by running the following command:
  21. ```shell script
  22. yarn add @tesseract-design/react-common
  23. ```
  24. ## Usage
  25. The package includes components as named exports. Simply import the components you need individually or use a namespace
  26. import, like so:
  27. ```jsx harmony
  28. import * as React from 'react'
  29. import ReactDOM from 'react-dom'
  30. import * as T from '@tesseract-design/react-common'
  31. const LoginForm = etcProps => (
  32. <form
  33. {...etcProps}
  34. >
  35. <fieldset>
  36. <legend>
  37. Log In
  38. </legend>
  39. <div>
  40. <T.TextInput
  41. label="Username"
  42. />
  43. </div>
  44. <div>
  45. <T.TextInput
  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. ```
  65. Detailed usage guides can be found in the documentation linked above.
  66. ## TypeScript
  67. The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
  68. compiled source.
  69. ## License
  70. MIT. See the LICENSE file on the package repository for the full text.