File tree Expand file tree Collapse file tree 1 file changed +42
-0
lines changed Expand file tree Collapse file tree 1 file changed +42
-0
lines changed Original file line number Diff line number Diff line change
1
+ # React JSXString to React Component
2
+
3
+ [ ![ npm version] ( https://img.shields.io/npm/v/react-jsxstring-to-react.svg?style=flat-square )] ( https://www.npmjs.org/package/react-jsxstring-to-react )
4
+ [ ![ ts version] ( https://badgen.net/badge/icon/Typescript?icon=typescript&label )] ( )
5
+ [ ![ github release] ( https://badgen.net/github/release/gihanrangana/react-jsxstring-to-react )] ( https://github.com/gihanrangana/react-jsxstring-to-react )
6
+ [ ![ license] ( https://badgen.net/github/license/micromatch/micromatch )] ( )
7
+ ![ NPM Downloads] ( https://img.shields.io/npm/dw/react-jsxstring-to-react )
8
+
9
+ react-jsxstring-to-react is a plugin for React to generate jsx component using strings. follow this example
10
+
11
+ ` npm install react-jsxstring-to-react `
12
+
13
+ or
14
+
15
+ ` yarn add react-jsxstring-to-react `
16
+
17
+ ``` tsx
18
+ const jsxString = ` <div className="outer">
19
+ <p className="test" style={{"color":"#f00"}}>Your Content</p>
20
+ </div> `
21
+
22
+ function App () {
23
+ const [elements, setElements] = useState ([])
24
+
25
+ const jsx = useJSX (jsxString )
26
+
27
+ useEffect (() => {
28
+ setElements (jsx .convert ())
29
+ }, [])
30
+
31
+ return (
32
+ <div >
33
+ { elements && elements .map (e => {
34
+ return e ;
35
+ })}
36
+ </div >
37
+ )
38
+ }
39
+ ```
40
+
41
+ # License
42
+ Copyright © 2023 [ Gihan Rangana] ( https://github.com/gihanrangana ) Released under the MIT license.
You can’t perform that action at this time.
0 commit comments