my-customhook-collection
v1.4.0
Published
Colección especial de CustomHooks
Downloads
4
Readme
my-customhook-collection
Colección de CustomHooks con diferentes funcionalidades, la cual tiene el fin de facilitar algunos procesos que tienden a ser repetitivos en el desarrollo, está versión incluye los siguientes hooks:
useMediaQuery
useFetch
useForm
FirebaseHooks:
useOnSnapshotCollection
useOnSnapshotDoc
useFirebaseUser
Instalación
Con npm:
$ npm install my-customhook-collection
¿Comó usarlos?
La importación de cualquier hook se debe realizar de la siguiente manera:
import {/*nombre del hook*/} from 'my-customhook-collection';
useMediaQuery
CustomHook que imita el funcionamiento de los media queries de CSS. Ejemplo de uso:
import {useMediaQuery} from 'my-customhook-collection';
const App=()=>{
const mediaQuery = useMediaQuery("(max-width: 460px)")
<div>
¿El ancho de la pantalla es mayor a 460px?
{mediaQuery?<p>No</p>:<p>Si</p>}
</div>
}
export default App
useFetch
CustomHook para realizar peticiones http con el método fetch. Ejemplo de uso:
import {useFetch} from 'my-customhook-collection';
const App=()=>{
const { loading, data } = useFetch(`https://www.breakingbadapi.com/api/quotes/1`);
<div >
{loading ? (
<p>Cargando...</p>
) : (
<>
<p>¡Petición realizada!</p>
</>
)}
</div>
}
export default App
useForm
CustomHook para el manejo de formularios. Ejemplo de uso:
import {useForm} from 'my-customhook-collection';
const App=()=>{
const [{name},handleInputChange, setValues] = useForm({
name:""
});
<div >
<input
type="text"
name="name"
placeholder="Nombre"
value={name}
onChange={handleInputChange}
/>
</div>
}
export default App
Firebase CustomHooks
useOnSnapshotCollection
CustomHook para el manejo de datos en tiempo real de una colección en firestore, en donde cada vez que ocurra un cambio este hook retornará un array de objetos con el id y los datos que contenga cada documento de la colección. Ejemplo de uso:
/*Nombre del componente FirebaseConfig*/
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
firebase.initializeApp({
apiKey: "########",
authDomain: "########",
projectId: "########",
storageBucket: "########",
messagingSenderId: "########",
appId: "########",
measurementId: "########"
});
export {firebase};
import {firebase} from "./FirebaseConfig";
import {useOnSnapshotCollection} from 'my-customhook-collection';
const App=()=>{
const db = firebase.firestore();
const refColl = db.collection("TestCollection");
const [Data,Loading,Error] = useOnSnapshotCollection(refColl);
console.log(Error);
return(
<div >
{Loading?
<p>Espera</p>:
Data.map(doc=>
<li key={doc.id}>{doc.id}</li>)
}
</div>
)
}
export default App
useOnSnapshotDoc
CustomHook para el manejo de datos en tiempo real de un documento en firestore, el hook retorna un objeto con los datos y el id del documento. Ejemplo de uso:
import {firebase} from "./FirebaseConfig";
import {useOnSnapshotDoc} from 'my-customhook-collection';
const App=()=>{
const db = firebase.firestore();
const refDoc = db.collection("TestCollection").doc("TestDoc");
const [Data, Loading, Error] = useOnSnapshotDoc(refDoc);
console.log(Error);
return (
<div >
{Loading?<p>Espera</p>:JSON.stringify(Data)}
</div>
);
}
export default App
useFirebaseUser
CustomHook para el manejo de sesión y objeto de datos que proporciona la autenticación de usuarios en firebase, el hook retorna un array el cual contiene un objeto y un valor booleano, el objeto contiene la información del CurrentUser y el valor booleano representa si hay o no alguien logueado, si el valor booleano es false, el objeto con la información de usuario será null : Ejemplo de uso:
import {firebase} from "./FirebaseConfig";
import {useFirebaseUser} from 'my-customhook-collection';
const App=()=>{
const [UserInfo,isOn] = useFirebaseUser(firebase);
console.log({UserInfo,isOn});
return(
<div>
{isOn?
<p>{UserInfo.displayName} ha iniciado sesión<p>:
<p>No hay nadie logueado</p>
}
</div>
)
}
export default App
Créditos
Los CustomHooks publicados en esta dependencia fueron codificados gracias a:
Alejandro García Anglada - Creador del CustomHook useMediaQuery - Alejandro García Anglada
Fernando Herrera - Profesor del curso "React: De cero a experto (Hooks y MERN)" - Fernando Herrera
Codealo - Canal de youtube de donde se saco la idea de los hooks useOnSnapshotCollection y useOnSnapshotDoc - Codealo