Skip to content

Commit 9882157

Browse files
update document
1 parent 131ad03 commit 9882157

File tree

1 file changed

+51
-4
lines changed

1 file changed

+51
-4
lines changed

README.md

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ Create React component from string
1111
- [Installation](#installation)
1212
- [Basic Example](#basic-example)
1313
- [Using Unknown Elements](#using-unknown-elements)
14+
- [props](#props)
15+
- [data](#data)
16+
- [babelOptions](#babelOptions)
17+
- [Generating source map](#generating-source-map)
1418
- [Caveats](#caveats)
1519
- [Test](#test)
1620
- [License](#license)
@@ -82,13 +86,56 @@ function App() {
8286

8387
```js
8488
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';
8691
function App() {
8792
return (
88-
<StringToReactComponent MyComponent={MyComponent}>
93+
<StringToReactComponent data={{MyFirstComponent, MySecondComponent}}>
8994
{`(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+
</>);
92139
}`}
93140
</StringToReactComponent>
94141
);

0 commit comments

Comments
 (0)