Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jscalderon65/my-customhook-collection
Dependencia de npm que contiene una colección de CustomHooks con variadas funcionalidades.
https://github.com/jscalderon65/my-customhook-collection
custom-hooks npm-package react-js
Last synced: 10 days ago
JSON representation
Dependencia de npm que contiene una colección de CustomHooks con variadas funcionalidades.
- Host: GitHub
- URL: https://github.com/jscalderon65/my-customhook-collection
- Owner: jscalderon65
- Created: 2021-01-14T23:18:45.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-11T05:52:15.000Z (over 3 years ago)
- Last Synced: 2024-10-17T10:56:23.136Z (27 days ago)
- Topics: custom-hooks, npm-package, react-js
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/my-customhook-collection
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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:_
```js
$ npm install my-customhook-collection
```
## ¿Comó usarlos?
_La importación de cualquier hook se debe realizar de la siguiente manera:_
```js
import {/*nombre del hook*/} from 'my-customhook-collection';
```
> ### useMediaQuery
_CustomHook que imita el funcionamiento de los media queries de CSS._
_Ejemplo de uso:_
```js
import {useMediaQuery} from 'my-customhook-collection';
const App=()=>{
const mediaQuery = useMediaQuery("(max-width: 460px)")
¿El ancho de la pantalla es mayor a 460px?
{mediaQuery?No
:Si
}
}
export default App
```
> ### useFetch
_CustomHook para realizar peticiones http con el método fetch._
_Ejemplo de uso:_
```js
import {useFetch} from 'my-customhook-collection';
const App=()=>{
const { loading, data } = useFetch(`https://www.breakingbadapi.com/api/quotes/1`);
{loading ? (
Cargando...
) : (
<>
¡Petición realizada!
>
)}
}
export default App
```
> ### useForm
_CustomHook para el manejo de formularios._
_Ejemplo de uso:_
```js
import {useForm} from 'my-customhook-collection';
const App=()=>{
const [{name},handleInputChange, setValues] = useForm({
name:""
});
}
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:_
```js
/*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};
```
```js
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(
{Loading?
Espera
:
Data.map(doc=>
{doc.id} )
}
)
}
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:_
```js
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 (
{Loading?Espera
:JSON.stringify(Data)}
);
}
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:_
```js
import {firebase} from "./FirebaseConfig";
import {useFirebaseUser} from 'my-customhook-collection';
const App=()=>{
const [UserInfo,isOn] = useFirebaseUser(firebase);
console.log({UserInfo,isOn});
return(
{isOn?
{UserInfo.displayName} ha iniciado sesión
:
No hay nadie logueado
}
)
}
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](https://www.youtube.com/user/aganglada91)
- **Fernando Herrera** - _Profesor del curso "React: De cero a experto (Hooks y MERN)"_ - [Fernando Herrera](https://www.udemy.com/course/react-cero-experto/#instructor-1)
- **Codealo** - _Canal de youtube de donde se saco la idea de los hooks useOnSnapshotCollection y useOnSnapshotDoc_ - [Codealo](https://www.youtube.com/channel/UCLdBO2AVbCohANbEtEHn1CA/featured)