@recursive-robot/react-jsx-parser 1.34.1 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
|
-
# react-jsx-parser [![
|
|
1
|
+
# react-jsx-parser [![Version][npm-version]][npm-link] [![NPM Downloads][npm-downloads]][npm-link] [![License][npm-license]](https://github.com/recursive-robot/react-jsx-parser/blob/master/LICENSE)
|
|
2
2
|
|
|
3
|
-
[
|
|
4
|
-
[npm-
|
|
5
|
-
[npm-downloads]: https://img.shields.io/npm/dt/react-jsx-parser.svg
|
|
3
|
+
[npm-version]: https://img.shields.io/npm/v/@recursive-robot/react-jsx-parser.svg
|
|
4
|
+
[npm-downloads]: https://img.shields.io/npm/dt/@recursive-robot/react-jsx-parser.svg
|
|
6
5
|
[npm-license]: https://img.shields.io/npm/l/react-jsx-parser.svg
|
|
7
6
|
[npm-link]: https://www.npmjs.com/package/react-jsx-parser
|
|
8
7
|
|
|
9
|
-
A React component which can parse JSX and output rendered React Components.
|
|
8
|
+
A React component which can parse JSX and output rendered React Components. This is a fork of [the original package](https://github.com/TroyAlford/react-jsx-parser) with support for function declarations and modern operators.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
npm install @recursive-robot/react-jsx-parser
|
|
14
|
+
```
|
|
10
15
|
|
|
11
16
|
## Basic Usage - Injecting JSX as a String
|
|
12
17
|
```javascript
|
|
13
18
|
import React from 'react'
|
|
14
|
-
import JsxParser from 'react-jsx-parser'
|
|
19
|
+
import JsxParser from '@recursive-robot/react-jsx-parser'
|
|
15
20
|
import Library from 'some-library-of-components'
|
|
16
21
|
|
|
17
22
|
class InjectableComponent extends Component {
|
|
@@ -49,9 +54,9 @@ Finally, a note about property bindings. The `JsxParser` can handle several type
|
|
|
49
54
|
- named-value binding, such as `eventHandler={myEventHandler}` (note that this requires a match in `bindings`)
|
|
50
55
|
- simple [single statement arrow expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#basic_syntax) `(item) => <p>{item.name}</p>`
|
|
51
56
|
|
|
52
|
-
|
|
53
|
-
- `
|
|
54
|
-
-
|
|
57
|
+
This component also supports inline arrow function declarations (both expression-bodied and block-bodied), such as:
|
|
58
|
+
- `onClick={() => showToastNotification("Button clicked!") }`
|
|
59
|
+
- `onClick={() => { this.showToastNotification("Button clicked!); }}` (parser bindings and local scope are bound to the function execution context)
|
|
55
60
|
|
|
56
61
|
## Advanced Usage - Injecting Dynamic JSX
|
|
57
62
|
```javascript
|
|
@@ -141,9 +146,3 @@ JsxParser.defaultProps = {
|
|
|
141
146
|
}
|
|
142
147
|
```
|
|
143
148
|
|
|
144
|
-
## Older Browser Support
|
|
145
|
-
|
|
146
|
-
If your application needs to support older browsers, like `IE11`, import from `react-jsx-parser/dist/es5/react-jsx-parser.min.js`,
|
|
147
|
-
which transpiles the `acorn-jsx` dependency down to ES5, and also adds additional polyfill support for code used in this package.
|
|
148
|
-
|
|
149
|
-
**Note**: <u>not</u> recommended for implementations which only support modern browsers, as the ES5 version is roughly 30% larger.
|