Useone-react NPM

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