1
- # string-to-react-component
1
+ # string-to-react-component
2
2
3
3
Create React component from string
4
4
@@ -14,7 +14,6 @@ Create React component from string
14
14
- [ props] ( #props )
15
15
- [ data] ( #data )
16
16
- [ babelOptions] ( #babelOptions )
17
- - [ Generating source map] ( #generating-source-map )
18
17
- [ Caveats] ( #caveats )
19
18
- [ Test] ( #test )
20
19
- [ License] ( #license )
@@ -116,31 +115,39 @@ function App() {
116
115
- type : object
117
116
- not required
118
117
- See the full option list [ here] ( https://babeljs.io/docs/en/options )
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
+ ` ` `
119
150
120
- ## Generating source map
121
-
122
- example :
123
-
124
- ``` js
125
- import StringToReactComponent from ' string-to-react-component' ;
126
- function App () {
127
- return (
128
- < StringToReactComponent babelOptions= {{filename: ' counter.js' , sourceMaps: ' inline' }}>
129
- {` (props)=>{
130
- const {useState}=React;
131
- const [counter,setCounter]=useState(0);
132
- const increase=()=>{
133
- setCounter(counter+1);
134
- };
135
- return (<>
136
- <button onClick={increase}>+</button>
137
- <span>{'counter : '+ counter}</span>
138
- </>);
139
- }` }
140
- < / StringToReactComponent>
141
- );
142
- }
143
- ```
144
151
145
152
## Caveats
146
153
0 commit comments