easy-context
Este projeto foi criado para facilitar o controle de fluxos em projetos react por meio de contextos.
Instalação
Para utilizar o pacote como dependência
- Execute o comando
yarn add @tecsinapse/easy-contextou
npm install @tecsinapse/easy-contextUtilização
createEasyContext()
Inica um objeto da entidade EasyContext.
register(name: string, initialValue?: T)
Registra um contexto com name que deve ser único e seu estado inicial caso exista.
useEasyAppStateValue(property: any)
Exemplo
Configurando e criando o provider:
import { EasyProvider } from '@tecsinapse/easy-context/src'
export const appContext = createEasyContext()
export const App = () => {
const registerContextFields = () => {
appContext.register('CURRENT_FLOW', 'Login')
appContext.register('AUTHORIZED', false)
}
return (
<EasyProvider init={registerContextFields} instance={appContext}>
<AppNavigator />
</EasyProvider>
)
}Utilizando o contexto na navegação do app:
import { EasyProvider } from '@tecsinapse/easy-context/src'
import { appContext } from './App'
export const AppNavigator = () => {
const [currentFlow] = appContext.useEasyAppStateValue('CURRENT_FLOW')
switch (currentFlow) {
case 'LOGIN':
navigationStack = loginStack()
break
case 'App':
navigationStack = appStack()
break
}
return (
<NavigationContainer>
{navigationStack}
</NavigationContainer>
)
}Alterando contextos:
import { EasyProvider } from '@tecsinapse/easy-context/src'
import { appContext } from './App'
export const useAuthentication = () => {
const [, setCurrentFlow] = appContext.useEasyAppStateValue(
'CURRENT_FLOW'
)
const [, setAuthorized] = appContext.useEasyAppStateValue(
'AUTHORIZED'
)
const authenticate = useAuthenticate()
useEffect(() => {
authenticate('login', 'senha')
.then(() => {
setAuthorized(true)
setCurrentFlow('App')
})
}, [])
}