Welcome to useful-react-hooks 👋
A set of custom useful hooks to be used in React Applications.
Homepage
🏠Documentation
📄Install
npm install useful-react-hooks
Usage
useAxios
Call setAxiosDefaultConfig and setAxiosAuthConfig to set the default and auth config for all useAxios hooks.
//in index.jsimport setAxiosDefaultConfig setAxiosAuthConfig from 'useful-react-hooks'; // use Axios Config to generate default configuration. Look up axios config // for config options;;
Then call useAxios inside of your component.
import useAxios from 'useful-react-hooks'; { /* useAxios returns an array of items. first item is the request object used to make axios requests. second item is the value returned from the axios request. thrid item is a string with the error message if there was an error fouth item is a boolean indicating if the axios request is running */ const request value error isloading = ; ; return <> isLoading && <div>is loading</div> value && value error && <p>error</p> </> }
Setup useAxios in component. This does not set the default config for other useAxios calls.
// or use config setup in component.const request value error isLoading = ; return <> isLoading && <div>loading</div> <button =>click me</button> <button =>click me</button> <button =>click me</button> error && <p>error</p> </>
useForm
import React useEffect from "react";import useAxios from "useful-react-hooks"; // be sure to follow useAxios setup. // Import useForm hookimport useForm from "useful-react-hooks"; { /* useForm returns an array of 2 items The first item is a read only value (state) The second item is an object that includes 3 handler functions 1) change, handles input changes 2) submit, (handles form submission) 3) clear, (clears form inputs) */ // folow useAxios guide to set up useAxios. const request value error isloading = ; // useForm accepts two arguments const state handle = ; const useAuth = true; { request; // Clears form inputs handle; } // in your form validate function you will recieve the name of the input and the value of the user has input { ifname ==== "username" if valuelength < 4 // return the error string return "Username must be longer than 4 characters."; else if name === "password" if passwordlength < 8 return "Password must be longer than 8 characters."; return ""; // leave blank for no error. } // Do something when the response from the axios request returns. ; return <div ="App"> <form => <input ="username" = = /> stateusername && stateusernameerror && <p>stateusername error</p> <input ="password" ="password" = = /> statepassword && statepassworderror && <p>statepassword error</p> <button =>Submit</button> </form> </div> ;}
useEncryption && useDecryption
First you must setup the encryption config. Please note that keys in a react app are not safe. They end up in the build of the app and the client will have access to them. If you truly want to set up a safe key. I believe you would want to keep it on your backend and do a http request to your server to retrieve it. I am by no means a security expert.
//index.jsimport React from 'react';import setEncryptionConfig from 'useful-react-hooks';;
Once it has been given a key as early in the app as possible. You are
free to use useEncryption and useDecryption through out your app.
useEncryption
import React useEffect from 'react';import useEncryption from 'useful-react-hooks'; { // useEncryption takes one optional argument. // value to be encrypted can be a string or a object. // it returns a array of two items. The encrypted data and a function to // change the value to be encrypted. const encrypted setValueToEncrypt = ; ; return <div>encrypted</div> }
useDecryption
import React useEffect from 'react';import useDecryption from 'useful-react-hooks'; { // useDecryption takes one optional argument. Value to be decrypted. String // return two items in a array, The decrypted data and a function to // change the value to be decrypted. const decrypted setValueToDecrypt = ; ; return <div>decrypted</div> }
useLocalStorage
import React useEffect from 'react';import useLocalStorage from 'useful-react-hooks'; { // useLocalStorage takes two arguments. The key for local storage and the inital value to use for local storage const userData setValue removeValue = ; const request value error isloading = ; // run use effect to create a axios request to get the userData from backend // run use effect when the value changes from the request call. ; return /* to remove the token do */ <button =>Remove User Data</button> ;}
Author
👤 Jeremiah Tenbrink jeremiahtenbrink@gmail.com
- Twitter: @CO_Comp_Nerd
- Github: @jeremiahtenbrink
🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2019 Jeremiah Tenbrink jeremiahtenbrink@gmail.com.
This project is ISC licensed.
This README was generated with ❤️ by readme-md-generator