useone-react
Version:
This package was make for advance version of useState(). it's simplify to use one state in anywhere of your project to transfer data without props , usecontext(), session storage.It's act like usestate() but different...
109 lines (78 loc) • 2.92 kB
Markdown
# Getting Started with useOne
This package was make for advance version of useState(). it's simplify to use one state in anywhere of your project to transfer data without props , usecontext(), session storage.
It's act like usestate() but different...
## Available Scripts
In the Package , you can run:
### `useOne`
you can extract useone component with other support functions from useone-react modules
1.import module:
import {useOne,useOneInitial,useOneFirst} from "useone-react"
2.useOneFirst is the main component it's call on main root component like App.js,index.js...
3.`useOneInitial` is initial the useOne keys without any return like void function
useOneInitial([5,{initial:"value"}],['ko',[true,"hello"]])
### `Examples:`
```
function App() {
useOneFirst() // main function
useOneInitial(['hii',{key:'value'}],[5,{initial:"value"}],['ko',[true,"hello"]])
//or
//const [test2,settest2]= useOne("hii",{key:'value'})
return (
<div className="App">
<BrowserRouter>
< Header/>
<Routes>
<Route path="/" element={<Body />} />
<Route path="/commo" element={<Test />} />
<Route path="/commo2" element={<Test2 />} /> {/* Add the Body component route */}
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
```
4.use this function inside the react component
const [demo,setdemo]= useOne( "ko")//[true,"hello"]
const [test,settest]= useOne( "9")
first parameter is a Key for your data retriving so Key is unique(it's only allow string and number for naming unique key) and use this Key any where in your project to retrive a updated data
5.second parameter is a actual data you want to update in state
const [test,settest]= useOne( "9","data")
6.finally it's return a array of variable to extract two variable then first index of variable is used for current data then, second one for updating current data
### `Examples:`
```
import {useOne} from "useone-react"
function Test() {
const [test,settest]= useOne( "9","cat")
const [test2,settest2]= useOne("hii") //{key:'value'}
return (<>
<div><input value={test} onChange={({target:{value}})=>{
settest(value)
}}/></div>
<button onClick={()=>{
settest("apple")
}}>change</button>
</>
)
}
export default Test;
//------------------------------------------
if Test2 component render useOne("9") function to retrive the last updated data "cat"
function Test2() {
const [test,settest]= useOne( "9") //cat
const [test2,settest2]= useOne("hii") //{key:'value'}
return (<>
<div><input value={test} onChange={({target:{value}})=>{
settest(value)
}}/></div>
<button onClick={()=>{
settest("byee")
}}>change</button>
<div>{test2.key}</div>
<button onClick={()=>{
settest2({key:"modified"})
}}>change</button></>
)
}
export default Test
```