|
1 | | - # string-to-react-component |
| 1 | +# string-to-react-component |
2 | 2 |
|
3 | 3 | Create React component from string |
4 | 4 |
|
|
30 | 30 | $ yarn add string-to-react-component |
31 | 31 | ``` |
32 | 32 |
|
33 | | -Also you should install `@babel/standalone` package because `string-to-react-component` has a peer dependency of `@babel/standalone` |
| 33 | +`string-to-react-component` has a peer dependency of `@babel/standalone`, then you should install `@babel/standalone` package : |
34 | 34 |
|
35 | 35 | ```js |
36 | 36 | $ npm install @babel/standalone --save |
| 37 | +``` |
37 | 38 |
|
38 | | -or |
39 | | - |
40 | | -//load `@babel/standalone` in the browser |
| 39 | +### CDN Links |
41 | 40 |
|
| 41 | +```js |
42 | 42 | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| 43 | +<script src="https://unpkg.com/string-to-react-component@3.0.4/dist/stringToReactComponent.umd.min.js"></script> |
43 | 44 | ``` |
44 | 45 |
|
45 | 46 | ## Basic Example |
@@ -124,38 +125,38 @@ function App() { |
124 | 125 | - not required |
125 | 126 | - See the full option list [here](https://babeljs.io/docs/en/options) |
126 | 127 | - examples : |
127 | | - * using source map : |
128 | | - ```js |
129 | | - <StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}> |
130 | | - {`(props)=>{ |
131 | | - const {useState}=React; |
132 | | - const [counter,setCounter]=useState(0); |
133 | | - const increase=()=>{ |
134 | | - setCounter(counter+1); |
135 | | - }; |
136 | | - return (<> |
137 | | - <button onClick={increase}>+</button> |
138 | | - <span>{'counter : '+ counter}</span> |
139 | | - </>); |
140 | | - }`} |
141 | | - </StringToReactComponent> |
142 | | - ``` |
143 | | - * using typescript : |
144 | | - ```js |
145 | | - <StringToReactComponent babelOptions={{ filename: 'counter.ts',presets: [["typescript", { allExtensions: true, isTSX: true }]] }}> |
146 | | - {`()=>{ |
147 | | - const [counter,setCounter]=React.useState<number>(0); |
148 | | - const increase=()=>{ |
149 | | - setCounter(counter+1); |
150 | | - }; |
151 | | - return (<> |
152 | | - <button onClick={increase}>+</button> |
153 | | - <span>{'counter : '+ counter}</span> |
154 | | - </>); |
155 | | - }`} |
156 | | - </StringToReactComponent> |
157 | | - ``` |
158 | | - |
| 128 | + - using source map : |
| 129 | + ```js |
| 130 | + <StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}> |
| 131 | + {`(props)=>{ |
| 132 | + const {useState}=React; |
| 133 | + const [counter,setCounter]=useState(0); |
| 134 | + const increase=()=>{ |
| 135 | + setCounter(counter+1); |
| 136 | + }; |
| 137 | + return (<> |
| 138 | + <button onClick={increase}>+</button> |
| 139 | + <span>{'counter : '+ counter}</span> |
| 140 | + </>); |
| 141 | + }`} |
| 142 | + </StringToReactComponent> |
| 143 | + ``` |
| 144 | + - using typescript : |
| 145 | + ```js |
| 146 | + <StringToReactComponent |
| 147 | + babelOptions={{filename: 'counter.ts', presets: [['typescript', {allExtensions: true, isTSX: true}]]}}> |
| 148 | + {`()=>{ |
| 149 | + const [counter,setCounter]=React.useState<number>(0); |
| 150 | + const increase=()=>{ |
| 151 | + setCounter(counter+1); |
| 152 | + }; |
| 153 | + return (<> |
| 154 | + <button onClick={increase}>+</button> |
| 155 | + <span>{'counter : '+ counter}</span> |
| 156 | + </>); |
| 157 | + }`} |
| 158 | + </StringToReactComponent> |
| 159 | + ``` |
159 | 160 |
|
160 | 161 | ## Caveats |
161 | 162 |
|
|
0 commit comments