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

1. Execute o comando

yarn add @tecsinapse/easy-context

ou

npm install @tecsinapse/easy-context

Utilizaçã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')
        })
  }, [])
}