| 1 |
|
| 2 |
|
| 3 | Myra
|
| 4 |
|
| 5 | Myra is (another) JSX rendering library. It is small, simple and built with and for [Typescript](http://www.typescriptlang.org/).
|
| 6 |
|
| 7 | [](https://www.npmjs.com/package/myra)
|
| 8 | [](https://travis-ci.org/jhdrn/myra)
|
| 9 | [](https://codecov.io/gh/jhdrn/myra)
|
| 10 | [](https://lgtm.com/projects/g/jhdrn/myra/context:javascript)
|
| 11 | [](https://www.npmjs.com/package/myra)
|
| 12 | [](https://cdn.jsdelivr.net/npm/myra/myra.min.js)
|
| 13 | [](https://packagephobia.now.sh/result?p=myra)
|
| 14 |
|
| 15 | [](https://nodei.co/npm/myra/)
|
| 16 |
|
| 17 | Myra is a JSX rendering engine implementing a subset of React, but with some
|
| 18 | differences (one being Myra uses requestAnimationFrame for updates).
|
| 19 |
|
| 20 | ## Setup
|
| 21 |
|
| 22 | Add a reference to myra, for example by installing it with NPM:
|
| 23 |
|
| 24 | `
|
| 25 | npm install --save myra
|
| 26 | `
|
| 27 |
|
| 28 | Add a tsconfig.json to your project:
|
| 29 |
|
| 30 | {
|
| 31 | "compilerOptions": {
|
| 32 | "target": "es5",
|
| 33 | "module": "commonjs",
|
| 34 | "jsx": "react",
|
| 35 | "jsxFactory": "myra.h",
|
| 36 |
|
| 37 | /* Optional, but recommended */
|
| 38 | "strict": true,
|
| 39 | "noUnusedLocals": true,
|
| 40 | "noUnusedParameters": true,
|
| 41 | "noImplicitReturns": true,
|
| 42 | "noFallthroughCasesInSwitch": true
|
| 43 | }
|
| 44 | }
|
| 45 |
|
| 46 | ## Mounting a component
|
| 47 | Use `myra.mount` to mount a component to the DOM:
|
| 48 |
|
| 49 | ```JSX
|
| 50 | // Mount the component to a DOM element
|
| 51 | myra.mount(<MyComponent />, document.body)
|
| 52 | ```
|
| 53 |
|
| 54 | ## Implemented hooks
|
| 55 | * useState - same as https://reactjs.org/docs/hooks-state.html
|
| 56 | * useMemo - same as https://reactjs.org/docs/hooks-reference.html#usememo
|
| 57 | * useEffect - same as https://reactjs.org/docs/hooks-effect.html
|
| 58 | * useLayoutEffect - same as https://reactjs.org/docs/hooks-reference.html#uselayouteffect
|
| 59 | * useRef - same as https://reactjs.org/docs/hooks-reference.html#useref
|
| 60 | * useErrorHandler - Catches any errors and renders an "error view" instead of
|
| 61 | the regular component view:
|
| 62 | ```JSX
|
| 63 | myra.useErrorHandler(error => <p>An error occured: {error}</p>)
|
| 64 | ```
|
| 65 |
|
| 66 | ## Memoized components
|
| 67 | Use `myra.memo` to create a component that will only render if it's props have
|
| 68 | changed. The second argument is an optional comparison function to make a custom
|
| 69 | rendering decision:
|
| 70 |
|
| 71 | ```JSX
|
| 72 | // Mount the component to a DOM element
|
| 73 | const MyMemoComponent = myra.memo<IProps>(props => <p></p>)
|
| 74 | ```
|
| 75 |
|
| 76 | ## Special props
|
| 77 | Some props and events has special behavior associated with them.
|
| 78 |
|
| 79 | * The `key` prop should be used to ensure that the state of child
|
| 80 | components is retained when they are changing position in a list. When used with
|
| 81 | elements, it may also prevent unnecessary re-rendering and thus increase performance.
|
| 82 | _It's value must be unique amongst the items in the list._
|
| 83 | * The `class` prop value will be set to the `className` property of the element.
|
| 84 | * The `ref` prop can be used to populate a ref's current value (see https://reactjs.org/docs/hooks-reference.html#useref)
|
| 85 |
|
| 86 | ## License
|
| 87 |
|
| 88 | [MIT](http://opensource.org/licenses/MIT)
|
| 89 |
|
| 90 | Copyright (c) 2016-2021 Jonathan Hedrén
|