Skip to content

Commit f86a165

Browse files
update readme file
1 parent 45e4deb commit f86a165

File tree

1 file changed

+33
-26
lines changed

1 file changed

+33
-26
lines changed

README.md

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# string-to-react-component
1+
# string-to-react-component
22

33
Create React component from string
44

@@ -14,7 +14,6 @@ Create React component from string
1414
- [props](#props)
1515
- [data](#data)
1616
- [babelOptions](#babelOptions)
17-
- [Generating source map](#generating-source-map)
1817
- [Caveats](#caveats)
1918
- [Test](#test)
2019
- [License](#license)
@@ -116,31 +115,39 @@ function App() {
116115
- type : object
117116
- not required
118117
- 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+
```
119150

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-
```
144151

145152
## Caveats
146153

0 commit comments

Comments
 (0)