useone-react
v1.2.2
Published
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...
Downloads
833
Maintainers
Readme
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