React-customs-hooks NPM

`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

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>
  )
}