Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

README.md 3.1 KiB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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://js.pack.modal.sh/-/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://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. ## Installation
  13. Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), 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://js.pack.modal.sh/"
  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. ```
  66. Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common).
  67. ## TypeScript
  68. The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
  69. compiled source.