complete document and examples

Author: dev-javascript

README.md

@@ -50,8 +50,7 @@ function App() {
   return (
     <StringToReactComponent>
       {`(props)=>{
-         const {useState}=React;
-         const [counter,setCounter]=useState(0);
+         const [counter,setCounter]=React.useState(0); // by default your code has access to the React object
          const increase=()=>{
            setCounter(counter+1);
          };
@@ -69,25 +68,25 @@ function App() {
 
 - The given code inside the string should be a function.
 
-- The code inside the string is executed in the global scope, so imported objects from `react` package including `useState`, `useEffect`, ... are not accessible inside it and you can get them from `React` global variable or pass them as props to the component :
-
-```js
-import {useState} from 'react';
-import StringToReactComponent from 'string-to-react-component';
-function App() {
-  return (
-    <StringToReactComponent data={{useState}}>
-      {`(props)=>{
-         console.log(typeof useState); // undefined
-         console.log(typeof React.useState); // function
-         console.log(typeof props.useState); // function
-         ...
-
-       }`}
-    </StringToReactComponent>
-  );
-}
-```
+- The code inside the string has access to the `React` object and for using `useState`, `useEffect`, `useRef` and ... you should get them from `React` object or pass them as `data` prop to the component:
+
+  ```js
+  import {useState} from 'react';
+  import StringToReactComponent from 'string-to-react-component';
+  function App() {
+    return (
+      <StringToReactComponent data={{useState}}>
+        {`(props)=>{
+           console.log(typeof useState); // undefined
+           console.log(typeof React.useState); // function
+           console.log(typeof props.useState); // function
+           ...
+  
+         }`}
+      </StringToReactComponent>
+    );
+  }
+  ```
 
 ## Using Unknown Elements
 
@@ -114,36 +113,43 @@ function App() {
 
 ### data
 
-- type : object
-- not required
+- type : `object`
+- required : `No`
 - `data` object is passed to the component(which is generated from the string) as props
+- example :
+
+  ```js
+  import {useState} from 'react';
+  import StringToReactComponent from 'string-to-react-component';
+  function App() {
+    const [counter, setCounter] = useState(0);
+    const increase = () => {
+      setCounter(counter + 1);
+    };
+    return (
+      <StringToReactComponent data={{counter, increase}}>
+        {`(props)=>{
+           return (<>
+             <button onClick={props.increase}>+</button>
+             <span>{'counter : '+ props.counter}</span>
+             </>);
+         }`}
+      </StringToReactComponent>
+    );
+  }
+  ```
 
 ### babelOptions
 
-- type : object
-- not required
+- type : `object`
+- required : `No`
+- default value : `{presets: ["react"],sourceMaps: "inline"}`
 - See the full option list [here](https://babeljs.io/docs/en/options)
 - examples :
-  - using source map :
-    ```js
-    <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>{'counter : '+ counter}</span>
-           </>);
-       }`}
-    </StringToReactComponent>
-    ```
   - using typescript :
     ```js
     <StringToReactComponent
-      babelOptions={{filename: 'counter.ts', presets: [['typescript', {allExtensions: true, isTSX: true}]]}}>
+      babelOptions={{filename: 'counter.ts', presets: ['react', ['typescript', {allExtensions: true, isTSX: true}]]}}>
       {`()=>{
          const [counter,setCounter]=React.useState<number>(0);
          const increase=()=>{

example/stories/data-prop/README.md

@@ -0,0 +1,21 @@
+```jsx
+import {useState} from 'react';
+import StringToReactComponent from 'string-to-react-component';
+function App() {
+  const [counter, setCounter] = useState(0);
+  const increase = () => {
+    setCounter(counter + 1);
+  };
+  return (
+    <StringToReactComponent data={{counter, increase}}>
+      {`(props)=>{
+           return (<>
+             <button onClick={props.increase}>+</button>
+             <span style={{padding:'0px 10px'}}>{'counter : '+ props.counter}</span>
+             </>);
+         }`}
+    </StringToReactComponent>
+  );
+}
+<App />;
+```

example/stories/usage/README.md

@@ -4,7 +4,7 @@ function App() {
   return (
     <StringToReactComponent>
       {`(props)=>{
-         const [counter,setCounter]=React.useState(0);//by default React object is emmbed into your string code
+         const [counter,setCounter]=React.useState(0);//by default your code has access to the React object
          const increase=()=>{
            setCounter(counter+1);
          };

example/stories/using-react-hooks/README.md

@@ -1,4 +1,4 @@
-Your imported object including `useState`, `useEffect`, `useRef` and ... are not accessible inside the string code but you can get them from `React` object ( by default `React` object is emmbed into your string code ) or pass them as the `data` prop
+The code inside the string has access to the `React` object and for using `useState`, `useEffect`, `useRef` and ... you should get them from `React` object or pass them as `data` prop to the component
 
 ```jsx
 import {useState} from 'react';
@@ -10,8 +10,8 @@ function App() {
       {`(props)=>{
          return (<>
                   <p>type of imported useState is {typeof useState}</p>
+                  <p>type of React is {typeof React}</p>
                   <p>type of React.useState is {typeof React.useState}</p>
-                  <p>type of React is {typeof React} ( by default React object is emmbed into your string code )</p>
                   <p>type of props.useState is {typeof props.useState}</p>
                  </>);
        }`}

styleguide.config.js

@@ -34,6 +34,7 @@ module.exports = {
   sections: [
     {name: 'Minimal Usage', content: 'example/stories/usage/README.md', sectionDepth: 1},
     {name: 'Using Unknown Elements', content: 'example/stories/using-unkown-elements/README.md', sectionDepth: 1},
+    {name: 'data prop', content: 'example/stories/data-prop/README.md', sectionDepth: 1},
     {name: 'Using React Hooks', content: 'example/stories/using-react-hooks/README.md'},
     {name: 'filename option', content: 'example/stories/filename-option/README.md', sectionDepth: 1},
     {name: 'Using Typescript', content: 'example/stories/typescript/README.md', sectionDepth: 1},