|
1 |
| - # string-to-react-component |
| 1 | +[](https://codecov.io/gh/dev-javascript/string-to-react-component) [](http://npmjs.org/package/string-to-react-component) [](http://nodejs.org/download/) [](https://react.dev/) [](LICENSE) [](https://npmjs.org/package/string-to-react-component) [](https://travis-ci.org/ly-components/string-to-react-component) |
2 | 2 |
|
3 |
| -Create React component from string |
| 3 | +# string-to-react-component |
4 | 4 |
|
5 |
| -> _Support react >= `v16.8.0`_ |
| 5 | +Create React component from string |
6 | 6 |
|
7 | 7 | ## Table of Contents
|
8 | 8 |
|
@@ -116,38 +116,38 @@ function App() {
|
116 | 116 | - not required
|
117 | 117 | - See the full option list [here](https://babeljs.io/docs/en/options)
|
118 | 118 | - examples :
|
119 |
| - * using source map : |
120 |
| - ```js |
121 |
| - <StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}> |
122 |
| - {`(props)=>{ |
123 |
| - const {useState}=React; |
124 |
| - const [counter,setCounter]=useState(0); |
125 |
| - const increase=()=>{ |
126 |
| - setCounter(counter+1); |
127 |
| - }; |
128 |
| - return (<> |
129 |
| - <button onClick={increase}>+</button> |
130 |
| - <span>{'counter : '+ counter}</span> |
131 |
| - </>); |
132 |
| - }`} |
133 |
| - </StringToReactComponent> |
134 |
| - ``` |
135 |
| - * using typescript : |
136 |
| - ```js |
137 |
| - <StringToReactComponent babelOptions={{ filename: 'counter.ts',presets: [["typescript", { allExtensions: true, isTSX: true }]] }}> |
138 |
| - {`()=>{ |
139 |
| - const [counter,setCounter]=React.useState<number>(0); |
140 |
| - const increase=()=>{ |
141 |
| - setCounter(counter+1); |
142 |
| - }; |
143 |
| - return (<> |
144 |
| - <button onClick={increase}>+</button> |
145 |
| - <span>{'counter : '+ counter}</span> |
146 |
| - </>); |
147 |
| - }`} |
148 |
| - </StringToReactComponent> |
149 |
| - ``` |
150 |
| - |
| 119 | + - using source map : |
| 120 | + ```js |
| 121 | + <StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}> |
| 122 | + {`(props)=>{ |
| 123 | + const {useState}=React; |
| 124 | + const [counter,setCounter]=useState(0); |
| 125 | + const increase=()=>{ |
| 126 | + setCounter(counter+1); |
| 127 | + }; |
| 128 | + return (<> |
| 129 | + <button onClick={increase}>+</button> |
| 130 | + <span>{'counter : '+ counter}</span> |
| 131 | + </>); |
| 132 | + }`} |
| 133 | + </StringToReactComponent> |
| 134 | + ``` |
| 135 | + - using typescript : |
| 136 | + ```js |
| 137 | + <StringToReactComponent |
| 138 | + babelOptions={{filename: 'counter.ts', presets: [['typescript', {allExtensions: true, isTSX: true}]]}}> |
| 139 | + {`()=>{ |
| 140 | + const [counter,setCounter]=React.useState<number>(0); |
| 141 | + const increase=()=>{ |
| 142 | + setCounter(counter+1); |
| 143 | + }; |
| 144 | + return (<> |
| 145 | + <button onClick={increase}>+</button> |
| 146 | + <span>{'counter : '+ counter}</span> |
| 147 | + </>); |
| 148 | + }`} |
| 149 | + </StringToReactComponent> |
| 150 | + ``` |
151 | 151 |
|
152 | 152 | ## Caveats
|
153 | 153 |
|
|
0 commit comments