formws v0.9.4602
formws
Instalar
npm install formws
yarn add formws
Descripcion
Librería para realizar llamadas a urls, y manejar usuarios dentro de la app. Ventajas: Se escribe menos código. Se puede llamar tanto sincrónico como asincrónico. Manejo de usuario en React y React-Native Se unifican las URLS que se consumen Se usan las ultimas funciones de React, Context, useReducer Cada request que se haga, va a estar disponible en la totalidad de la aplicación al estilo del redux.
Uso
import React, { Component } from 'react'
import { WSProvider } from 'formws'
const App = () => {
const [user, setUser] = useState({ nombre: 'Tano' })
return (
<WSProvider
urls={{
ejemplo: 'www.ejemplo.com',
ejemplo1: 'www.ejemplo1.com'
}} // Objeto con las urls para consumir dentro de la app
onUser={(user) => {
if (user) {
localStorage.setItem(Constants.CLIENT_INFO, JSON.stringify(user))
setUser(user)
} else {
setUser(null)
localStorage.removeItem(Constants.CLIENT_INFO)
}
}} // Método que se llama cuando desde algún componente se utliza setUser. Ideal para usar tanto en react como react-native ya que podes guardarlo de la forma que pinte.
user={user} // Si guardaste el usuario en algun lado, acá se lo pasas
headers={{
Authorization: user ? `Bearer ${user.token}` : undefined
}} // Headers que van a tener TODAS las llamadas que se hagan
defaultParams={{
device_id: 'UNIQUE_ID'
}} // Parametros por defecto que van a tener TODAS las llamadas
>
>
<RestApp />
</WSProvider>
)
}
import React, { Component } from 'react'
import { WSProvider, useFetch } from 'formws'
const InsideComponente = () => {
const { data, isLoading, error, call } = useFetch('ejemplo')
useEffect(() => {
call({ method: 'GET', query: {} })
}, [])
return <Components />
}
Llamada sincrónica
import React, { Component } from 'react'
import { WSProvider, useFetch } from 'formws'
const InsideComponente = () => {
const { data, isLoading, error, call } = useFetch('ejemplo')
return (
<Components
onClick={() => {
const result = await call({ method: 'GET' })
const { results, error } = respuesta
if (error) {
//Misma información que en el error de arriba
}
if (results) {
// Misma información que en el data de arriba
}
}}
/>
)
}
API
import { useFetch } from 'formws'
const InsideComponente = () => {
const {
isLoading, // Cuando se llama a call, se pone true, cuando termina false
call, // Se usa para llamar al endpoint
clean, // Limpia el context de la última llamada
hookId, // Para debuguear mejor
url, // La url del endpoint
data, // La data que devuelve el endpoint
error // SI ocurrió algun error se llena esta variable
} = useFetch('ejemplo')
return (
<Components
onClick={() => {
const result = await call({
method: 'GET' // Metoodo HTTP
query: {}, // Objeto con los parametros a enviar, dependiendo el metodo
data: undefined || {} || [], // Objeto o array Para poner en el contexto antes de llamar
transformData: undefined || (data) => {return data}, //Metodo para modificar el resultado antes de ponerlo en la variable data, lo que devuelva, va a estar ahí
isFormData: undefined || true || false // Si estás mandando archivos, usar en true
forceSync: undefined || true || false // Solo se usa el axios, no se guarda el estado en el contexto ni se rerenderiza el componente
})
}}
/>
)
}
Licencia
MIT © Julián Lionti(https://github.com/Julián Lionti)
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago