react haiku
v2.1.8
Haiku é uma biblioteca de React simples e leve com o objetivo de salvar
você é o tempo oferecendo uma grande coleção de ganchos e utilitários que vão
Ajude você a fazer o trabalho mais rápido e com mais eficiência!
Instalar o haiku é muito fácil!
Requer react> = 16.8.0
npm install react-haikuyarn add react-haikupnpm install react-haikuEste projeto usa o JEST como a estrutura de teste e a biblioteca de testes de reação (RTL) para testar componentes e ganchos do React.
Para executar todos os testes de unidade com cobertura ativada
npm run test Por favor, verifique a documentação oficial para obter exemplos completos de uso.
import { useHover } from 'react-haiku' ;
const Component = ( ) => {
const { hovered , ref } = useHover ( ) ;
return < p ref = { ref } > { hovered ? 'All mice on me' : 'No mice on me' } </ p > ;
} ;
export default Component ; import { For } from 'react-haiku' ;
const Component = ( ) => {
const list = [ { name : 'React' } , { name : 'Haiku' } ] ;
render (
< >
< For each = { list } render = { ( item , index ) => < p > { item . name } </ p > } />
</ > ,
) ;
} ;
export default Component ; O Haiku está sempre aberto a melhorias e contribuições, você pode verificar os problemas abertos se quiser contribuir e também é possível solicitar adicionar suas próprias melhorias/idéias usando o modelo de solicitação de recurso. Antes de contribuir, leia o guia de contribuição e certifique -se de respeitar os padrões! Obrigado pelo seu tempo!
useClipboard() - Copie dados para a área de transferência do usuário!useHover() - maneira rápida de detectar se o mouse está acima de um elemento!useInputValue() - Gerencie o estado de entrada com este gancho simples!useLeaveDetection() - Detecte quando o cursor do seu usuário sair da página!useMediaQuery() - Manipule seu componente usando consultas de mídia!useMousePosition() - Detecte a posição atual do mouse em relação a um alvo ou a todo o documento!usePrefersTheme() - Detecte o tema do sistema preferido do usuário!useScript() - Anexe tags de script ao documento a partir de seus componentes!useToggle() - alternar os valores do estado entre duas opções diferentes!useBoolToggle() - Alterne os valores do estado booleano!useUrgentUpdate() - Força renderiza um componente ao chamar esse gancho!useClickOutside() - detecte cliques fora de um elemento de destino!useConfirmExit() - solicite ao usuário uma mensagem antes de fechar a guia se o estado for definido como sujo.useDebounce() - Debounce State muda para reagir às atualizações após um atraso!useEventListener() - Defina os ouvintes de eventos no objeto da janela ou um elemento de destino específico!useFavicon() - Atualize dinamicamente o favicon do site a partir de um componente!useFirstRender() - Verifique se um componente está ou não em sua primeira renderização!useHold() - manuseie prensas longas em um elemento de destino e execute um manipulador após um atraso definido!useIdle() - Detecte a atividade/inatividade do usuário na página com base em eventos!useIsomorphicLayoutEffect() - Alterne entre o UseEffect e o UselayoutEffect, dependendo do ambiente de execução (SSR vs navegador)!useLocalStorage() - Gerenciar valores de armazenamento local dinamicamenteuseScrollPosition() - Acesse a posição de rolagem atual na página e modifique -a programaticamente.useSingleEffect() - Execute o gancho de uso de uso estritamente apenas uma vez quando o componente estiver montado!useTitle() - Atualize o título do documento dos seus componentes!useUpdateEffect() - Semelhante ao UseEffect, mas pula a primeira renderização de um componente e reage apenas às atualizações acionadas pelos valores de dependência.If - Componente para renderização condicional simples!Show - Componente para renderização condicional complexa!For - componente de renderização dinâmica com atribuição automática de chave!RenderAfter - componente que renderiza seus filhos após um atraso definido.Image - Componente que simplifica o processo de renderização de imagens. David Haz
Mit
