react custom hooks

here has some react custom hooks. by using those hooks you can easily use global state management fetch data, delete data, update data, post data , asyncstorage, secure store toggle change value and also some other facilities.

Installation

Instaling with npm

npm i react-customs-hooks
   

Instaling with yarn

yarn add react-customs-hooks
   

Documentation

Documentation

config your project

import {CustomHooksRoot} from  'react-customs-hooks'
import Component from 'my-project'

function App() {
  return (
         <CustomHooksRoot>
          <Component />
          </CustomHooksRoot>
        );
}

export defalt App;

API Reference

Get all hooks details

  GET /api/items

| Hook | Parameter | return | Description | | :-------- | :------- | :------- | :------------------------- | | useSetGlobal()|key , value| data, setGlobalData | Required. Your key && value if you use setGlobalData(key, value) or useSetGlobal(key, value) | | useGetGlobal()|key| data | Required. key | | useFetch()|url,config| getFetch ,data, error, status, loading | Required. url | | usePost()|url, body, config| PostDataFnc, data, error, status, loading | Required. url | | useDelete()|url, body, config| deleteDataFnc, data, deleteData , error, status, loading | Required. url | | useUpdate()|url, body, config| setupdataData , updataDataFnc, data, updateData , error, status, loading | Required. url | | usePostSecureStore()|key , value| setStoreData ,storeData, error, loading | Required. Your key && value if you use usePostSecureStore(key, value) or setStoreData(key, value) | | useGetSecureStore()|key | data , getData, loading, error | Required. Your key if you use useGetSecureStore(key) or getData(key) |

Usage -useGetGlobal Hook

//   load data when screen open

const Home = () => {
   const  data  =  useGetGlobal(key)
   
     return (
        <ScrollView contentContainerStyle={{marginVertical:30}}>
            { data  &&  data.map(i=><Text>{i.title}</Text>)}
        </ScrollView>
    )
   }

export default Home


//or

const Home = () => {
   const  { userData, userInfo }  =  useGetGlobal()
   
     return (
        <ScrollView contentContainerStyle={{marginVertical:30}}>
            { userData  &&  userData.map(i=><Text>{i.title}</Text>)}
        </ScrollView>
    )
   }

export default Home
 

 

Usage -useSetGlobal Hook

 

const { data , setGlobalData} =  useSetGlobal(key, value)
   
     return (
        <ScrollView contentContainerStyle={{marginVertical:30}}>
              // set your data 
            { data.user  &&  data.user.map(i=><Text>{i.title}</Text>)} // show your data 
        </ScrollView>
    )
 

 //or 

 const { data , setGlobalData} =  useSetGlobal()
   
     return (
        <ScrollView contentContainerStyle={{marginVertical:30}}>
        <Buttton onPress={()=>setGlobalData(key, value)} /> // set your data 
           { data.user  &&  data.user.map(i=><Text>{i.title}</Text>)} // show your data 
        </ScrollView>
    )
 

 

Usage -useFetch Hook

//   load data when screen open

 const App = () => {
   const  [data,getData,loading,status,error] =  useFetch('https://jsonplaceholder.typicode.com/users')
   return (
    <View>
      { data &&  data.map(item=> <Text>{item.name}</Text>)}
    </View>
  )
}

// load data with any action 
const App = () => {

    const {data , setData,  status, error, loading} =  useFetch()
    console.log(data)
  return (
    <View style={{marginTop:100}}>
       <Button onPress={()=>setData('https://jsonplaceholder.typicode.com/users')} title='click' />
      { data && data.map(i=><Text key={i.id} >{i.name}</Text>)}
    </View>
  )
}





 

Usage -usePost Hook

 
   const [data,PostDataFnc,loading,status,error] =  usePost('url', body,config )
  
   console.log(data)
   return (
    <View>
      <Button onPress={()=>PostDataFnc()  } title="Press" />
    </View>
  )
}
 

Usage - useDelete Hook

   const  [data, deleteDataFnc, loading, status, error] =  useDelete('url', body,config )
  
  
   return (
    <View>
      <Button onPress={()=>deleteDataFnc()  } title="Press" />
    </View>
  )
}

 

Usage - useUpdate Hook

   const  [data,updataDataFnc,loading,status,error] =  useUpdate('url', body,config )
  
   console.log(data)
   return (
    <View>
      <Button onPress={()=>updataDataFnc()  } title="Press" />
    </View>
  )

Usage - useGetSecureStore Hook

    const  [ data,getData,loading, error ] =  useGetSecureStore(key, initialValue)
  
   console.log(data)
   return (
    <View>
      <Text>{data.name}</Text>
      <Text>{data.email}</Text>
    </View>
  )
}




  const  [ data,getData,loading, error ] =  useGetSecureStore()// if you are not using here key or initialValue you can use it when hook will be call 
  
   console.log(data)
   return (
    <View>
       <Button onPress={()=>getData(key, initialValue)} titile="Call Hook" />
      <Text>{data.name}</Text>
      <Text>{data.email}</Text>
    </View>
  )
}

Usage - usePostSecureStore Hook

  const  [ storeData,loading, error] =  usePostSecureStore(key, initialValue)
  
   console.log(data)
   return (
    <View>
      <Button onPress={()=>storeData()} />
    </View>
  )
}

Usage - other way of usePostSecureStore Hook

  const  [ storeData,loading, error] =  usePostSecureStore()
  
   console.log(data)
   return (
    <View>
      <Button onPress={()=>storeData(key, initialValue)} />
    </View>
  )


  //or 

    const  [ storeData,loading, error] =  usePostSecureStore(key, initialValue)
  
    console.log(data)
   return (
    <View>
      <Button onPress={()=>storeData()} />
    </View>
  )

Usage - useGetAsyncStore Hook

    const [data, getData , getStringData] =  useGetAsyncStore(key)
  
   console.log(data)// data will be string Data 
   return (
    <View>
      <Text>{data.name}</Text>
      <Text>{data.email}</Text>
    </View>
  )
}

 const [data, getData , getStringData]  =  useGetAsyncStore(key, 1)
  
   console.log(data) // data will be object Data
   return (
    <View>
      <Text>{data.name}</Text>
      <Text>{data.email}</Text>
    </View>
  )
}


// you can also call getData , getStringData;

Usage - usePostAsyncStore Hook

    const [storeData , storeVariable] =  usePostAsyncStore(key)
    // for string call storeVariable , for object call storeData
  
   console.log(data)
   return (
    <View>
      <Text>{data.name}</Text>
      <Text>{data.email}</Text>
    </View>
  )
}

 

License

MIT.