My-customhook-collection NPM

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