@@ -11,6 +11,10 @@ Create React component from string
11
11
- [ Installation] ( #installation )
12
12
- [ Basic Example] ( #basic-example )
13
13
- [ Using Unknown Elements] ( #using-unknown-elements )
14
+ - [ props] ( #props )
15
+ - [ data] ( #data )
16
+ - [ babelOptions] ( #babelOptions )
17
+ - [ Generating source map] ( #generating-source-map )
14
18
- [ Caveats] ( #caveats )
15
19
- [ Test] ( #test )
16
20
- [ License] ( #license )
@@ -82,13 +86,56 @@ function App() {
82
86
83
87
``` js
84
88
import StringToReactComponent from ' string-to-react-component' ;
85
- import MyComponent from ' path to MyComponent' ;
89
+ import MyFirstComponent from ' path to MyFirstComponent' ;
90
+ import MySecondComponent from ' path to MySecondComponent' ;
86
91
function App () {
87
92
return (
88
- < StringToReactComponent MyComponent = {MyComponent }>
93
+ < StringToReactComponent data = {{MyFirstComponent, MySecondComponent} }>
89
94
{` (props)=>{
90
- const {MyComponent}=props;
91
- return (<MyComponent/>);
95
+ const {MyFirstComponent, MySecondComponent}=props;
96
+ return (<>
97
+ <MyFirstComponent/>
98
+ <MySecondComponent/>
99
+ </>);
100
+ }` }
101
+ < / StringToReactComponent>
102
+ );
103
+ }
104
+ ```
105
+
106
+ ## props
107
+
108
+ ### data
109
+
110
+ - type : object
111
+ - not required
112
+ - ` data ` object is passed to the component(which is generated from the string) as props
113
+
114
+ ### babelOptions
115
+
116
+ - type : object
117
+ - not required
118
+ - See the full option list [ here] ( https://babeljs.io/docs/en/options )
119
+
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
+ </>);
92
139
}` }
93
140
< / StringToReactComponent>
94
141
);
0 commit comments