dev-javascript
diff --git a/‎example/index.html
+38 b/‎example/index.html
+38
diff --git a/‎example/stories/data-prop/README.md
+52 b/‎example/stories/data-prop/README.md
+52
diff --git a/‎example/stories/source-map/README.md
+22 b/‎example/stories/source-map/README.md
+22
diff --git a/‎example/stories/styles.css
+7 b/‎example/stories/styles.css
+7
diff --git a/‎example/stories/typescript/README.md
+22 b/‎example/stories/typescript/README.md
+22
diff --git a/‎example/stories/usage/README.md
+21 b/‎example/stories/usage/README.md
+21
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<title>myPage</title>
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
+<script src="../dist/stringToReactComponent.umd.min.js"></script>
+
+<body>
+
+    <div id="root"></div>
+
+    <script type="text/babel">
+        const StringToReactComponent = window.StringToReactComponent;
+        const Welcome = function Welcome(props) {
+
+            return (<StringToReactComponent>
+                {`(props)=>{
+         const {useState}=React;
+         const [counter,setCounter]=useState(0);
+         const increase=()=>{
+           setCounter(counter+1);
+         };
+         return (<div>
+           <button onClick={increase}>+</button>
+           <span>{'counter : '+ counter}</span>
+           </div>);
+       }`}
+            </StringToReactComponent>);
+        };
+
+        ReactDOM.render(<Welcome />, document.getElementById('root'));
+    </script>
+
+</body>
+
+</html>
@@ -0,0 +1,52 @@
+### Passing useState
+
+```jsx
+import {useState} from 'react';
+import StringToReactComponent from 'string-to-react-component';
+
+function App() {
+  return (
+    <StringToReactComponent data={{useState}}>
+      {`(props)=>{
+         const [counter,setCounter]=props.useState(0);
+         const increase=()=>{
+           setCounter(counter+1);
+         };
+         return (<>
+           <button onClick={increase}>+</button>
+           <span style={{padding:'0px 10px'}}>{'count : '+ counter}</span>
+           </>);
+       }`}
+    </StringToReactComponent>
+  );
+}
+<App />;
+```
+
+### Passing Unknown Elements
+
+```jsx
+import StringToReactComponent from 'string-to-react-component';
+
+function MyFirstComponent() {
+  return <p>This is my first component.</p>;
+}
+function MySecondComponent() {
+  return <p>This is my second component.</p>;
+}
+
+function App() {
+  return (
+    <StringToReactComponent data={{MyFirstComponent, MySecondComponent}}>
+      {`(props)=>{
+         const {MyFirstComponent, MySecondComponent}=props;
+         return (<>
+          <MyFirstComponent/>
+          <MySecondComponent/>
+         </>);
+       }`}
+    </StringToReactComponent>
+  );
+}
+<App />;
+```
@@ -0,0 +1,22 @@
+```jsx
+import StringToReactComponent from 'string-to-react-component';
+
+function App() {
+  return (
+    <StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}>
+      {`(props)=>{
+           const {useState}=React;
+           const [counter,setCounter]=useState(0);
+           const increase=()=>{
+             setCounter(counter+1);
+           };
+           return (<>
+             <button onClick={increase}>+</button>
+             <span style={{padding:'0px 10px'}}>{'count : '+ counter}</span>
+             </>);
+         }`}
+    </StringToReactComponent>
+  );
+}
+<App />;
+```
@@ -0,0 +1,7 @@
+pre > span.token.tag:nth-last-child(3),
+pre > span.token.punctuation:nth-last-child(2) {
+  display: none;
+}
+main > footer {
+  display: none !important;
+}
@@ -0,0 +1,22 @@
+```jsx
+import StringToReactComponent from 'string-to-react-component';
+
+function App() {
+  return (
+    <StringToReactComponent
+      babelOptions={{filename: 'counter.ts', presets: [['typescript', {allExtensions: true, isTSX: true}]]}}>
+      {`()=>{
+        const [counter,setCounter]=React.useState<number>(0);
+        const increase=()=>{
+          setCounter(counter+1);
+        };
+        return (<>
+          <button onClick={increase}>+</button>
+          <span style={{padding:'0px 10px'}}>{'count : '+ counter}</span>
+          </>);
+       }`}
+    </StringToReactComponent>
+  );
+}
+<App />;
+```
@@ -0,0 +1,21 @@
+```jsx
+import StringToReactComponent from 'string-to-react-component';
+function App() {
+  return (
+    <StringToReactComponent>
+      {`(props)=>{
+         const {useState}=React; // React can be used as a global variable
+         const [counter,setCounter]=useState(0);
+         const increase=()=>{
+           setCounter(counter+1);
+         };
+         return (<>
+           <button onClick={increase}>+</button>
+           <span style={{padding:'0px 10px'}}>{'count : '+ counter}</span>
+           </>);
+       }`}
+    </StringToReactComponent>
+  );
+}
+<App />;
+```