react-customs-hooks

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, status, error, loading} =  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 {PostDataFnc, data, error, status, loading} =  usePost('url', body,config )
  
   console.log(data)
   return (
    <View>
      <Button onPress={()=>PostDataFnc()  } title="Press" />
    </View>
  )
}
 

Usage - useDelete Hook

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

 

Usage - useUpdate Hook

   const {   updataDataFnc, data, error, status, loading } =  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 } =  usePostSecureStore(key, initialValue)
  
   console.log(data)
   return (
    <View>
      <Button onPress={()=>storeData()} />
    </View>
  )
}

Usage - other way of usePostSecureStore Hook

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


  //or 

    const {storeData } =  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.