Hooks são uma adição útil à API do React, que nos permite organizar parte de nossa lógica e estado nos componentes de função. Como podemos criar um gancho personalizado e compartilhá-lo com o resto do mundo?

https://www.youtube.com/watch?v=Q0xVnRanXVk

O que são ganchos?

Reagir ganchos em termos simples, são funções. Quando você os inclui em seu componente ou dentro de outro gancho, eles permitem que você use os componentes internos do React e partes do ciclo de vida do React com ganchos nativos, como useState e useEffect.

Não pretendo fazer um mergulho profundo sobre ganchos, mas você pode confira uma introdução rápida com um exemplo de useState assim como a introdução da equipe React.

Por que os ganchos personalizados são legais?

O melhor da criação de ganchos personalizados é que eles permitem abstrair a lógica de seus componentes, facilitando a reutilização em vários componentes do seu aplicativo.

Por exemplo, se você deseja criar um contador simples em que usa o estado do React para gerenciar a contagem atual. Em vez de ter o mesmo useState em cada arquivo de componente, é possível criar essa lógica uma vez em um useCounter gancho, facilitando a manutenção, extensão e esmagamento de bugs, se surgirem.

O que vamos fazer?

Para os fins deste artigo, vamos simplificar com um gancho básico. Normalmente, você pode usar um gancho porque, em vez de uma função típica, usa outros ganchos nativos que precisam ser usados ​​nos componentes da função React. Vamos manter algumas entradas e saídas básicas para simplificar as coisas.

Vamos recriar esse costume Gancho de placacage Eu criei que permite gerar facilmente URLs de imagem que você pode usar como imagens de espaço reservado.

Se você não conhece, Placecage é uma API que permite gerar imagens de Nic Cage como imagens de espaço reservado para seu site. Boba? Sim. Diversão? Absolutamente!

Mas se você não é fã do trabalho de Nic, também pode trocar com facilidade o URL por Fill Murray que usa imagens de Bill Murray ou placeholder.com que gera plano de fundo simples em cores sólidas com texto que mostra o tamanho da imagem.

Etapa 0: Nomeando seu gancho

Antes de pularmos para o nosso código real, nosso objetivo final é publicar esse gancho. Se esse não é o seu objetivo, você pode pular esta etapa, mas, para publicar, queremos criar um nome para o nosso gancho.

No nosso caso, o nome do nosso gancho será usePlaceCage. Agora, com isso em mente, temos 2 formatos de nosso nome – um no formato camelCase e outro no formato de caixa de cobra.

• camelCase: usePlaceCage
• estojo de cobra: use-placecage

O formato camelCase será usado para a função de gancho real, onde o nome da caixa da serpente será usado para o nome do pacote e algumas das pastas. Ao criar o nome, lembre-se de que o nome do pacote deve ser exclusivo. Se um pacote com o mesmo nome existir em npmjs.com já, você não poderá usá-lo.

Se você ainda não tem um nome, tudo bem! Você pode simplesmente usar seu próprio nome ou algo em que possa pensar, isso realmente não importa muito, pois estamos apenas tentando aprender como fazer isso. Se fosse eu, por exemplo, eu usaria:

• camelCase: useColbysCoolHook
• estojo de cobra: use-colbyscoolhook

Mas apenas para esclarecer, pelo resto do nosso exemplo, vamos continuar com usePlaceCage e use-placecage.

Etapa 1: configurando seu projeto

Embora você possa configurar o seu projeto da maneira que desejar, vamos seguir desenvolvendo um novo gancho de este modelo Eu criei.

A esperança aqui é que possamos remover algumas das partes dolorosas do processo e imediatamente ser produtivos com nosso gancho personalizado. Não se preocupe, vou explicar o que está acontecendo ao longo do caminho.

Os requisitos aqui são git e fio pois ajuda a fornecer ferramentas que facilitam a estrutura deste modelo, como usar o recurso de áreas de trabalho para permitir que scripts npm fáceis gerenciem o código a partir da raiz do projeto. Se um desses for um infrator, tente baixar o repositório através do link de download e atualizá-lo conforme necessário.

Clonando o modelo de gancho do git

Para começar, vamos clonar o repositório do Github. No comando abaixo, você deve substituir use-my-custom-hook com o nome do seu gancho, como use-cookies ou use-mooncake.

git clone https://github.com/colbyfayock/use-custom-hook use-my-custom-hookcd use-my-custom-hook

Depois de clonar e navegar para essa pasta, você deverá ver 2 diretórios – um example diretório e um use-custom-hook diretório.

Isso lhe dará algumas coisas para começar:

• Um diretório do gancho que incluirá a fonte do nosso gancho
• Crie scripts que compilam nosso gancho com babel
• Uma página de exemplo que importa nosso gancho e cria uma página de demonstração simples com next.js

Executando os scripts de configuração do gancho

Depois de clonarmos com êxito o repositório, queremos executar os scripts de instalação que instalam dependências e atualizam o gancho para o nome desejado.

yarn install && yarn setup

Quando o script de instalação for executado, ele fará algumas coisas:

• Ele solicitará seu nome – usado para atualizar a LICENÇA e o nome do autor do pacote
• Ele solicitará o nome do seu gancho em duas variações – camelCase e snake-case – isso será usado para atualizar o nome do gancho em todo o modelo e mover os arquivos com esse nome para o local correto
• Ele redefinirá o git – primeiro removerá a pasta .git local, que contém o histórico do meu modelo e reinicializará o git com uma nova confirmação para iniciar seu novo histórico em
• Por fim, ele removerá o diretório do script de instalação e as dependências do pacote que estavam sendo usadas apenas por esses scripts

Iniciando o Servidor de Desenvolvimento

Depois que os scripts de instalação terminarem, você deverá executar:

yarn develop

Isso executa um processo de observação na origem do gancho, construindo o gancho localmente toda vez que um arquivo de origem é alterado e executando o servidor de aplicativos de exemplo, onde você pode testar o gancho e fazer alterações nas páginas de exemplo.

Com tudo pronto, podemos começar!

Siga junto com o commit!

Etapa 2: Escrevendo seu novo React Hook

Neste ponto, agora você deve ter um novo gancho personalizado, onde poderá fazer o que quiser. Mas já que vamos continuar reconstruindo o usePlaceCage gancho, vamos começar por aí.

O gancho usePlaceCage faz uma coisa simples de uma exibição de alto nível – ele pega um objeto de configuração e retorna vários URLs de imagem que você pode usar para seu aplicativo.

Apenas como lembrete, sempre que eu mencionar usePlaceCage ou use-placecage, você deve usar o nome do gancho que você configurou antes.

Um pouco sobre placecage.com

O Placecage.com é um serviço de imagem de espaço reservado que faz uma coisa. Ele pega uma URL com uma configuração simples e retorna uma imagem … de Nic Cage.

No uso mais simples, o serviço usa um padrão de URL da seguinte maneira:

https://www.placecage.com/200/300

Isso retornaria uma imagem com largura de 200 e altura de 300.

Opcionalmente, você pode passar um parâmetro de URL adicional que define o tipo de imagem:

https://www.placecage.com/gif/200/300

Nesse caso em particular, nosso tipo é gif, então receberemos um gif.

Os diferentes tipos disponíveis para uso são:

• Nada: calmo
• g: cinzento
• c: louco
• gif: gif

Usaremos isso para definir como definir a configuração para o nosso gancho.

Definindo nossa função de gerador de núcleo

Para começar, copiaremos uma função na parte inferior da nossa use-placecage/src/usePlaceCage.js , o que nos permite gerar um URL de imagem, além de algumas definições constantes que usaremos nessa função.

Primeiro, vamos copiar nossas constantes para o topo da nossa usePlaceCage.js Arquivo:

const PLACECAGE_HOST = 'https://www.placecage.com/';const TYPES = {  calm: null,  gray: 'g',  crazy: 'c',  gif: 'gif'};const DEFAULT_TYPE = 'calm';const ERROR_BASE = 'Failed to place Nick';

Aqui nós:

• Defina um host, que é o URL base do nosso serviço de imagem.
• Defina os tipos disponíveis, que usaremos na API de configuração. Montamos calm para null, porque é o valor padrão que você obtém ao não incluí-lo
• Nosso tipo padrão será calm
• E definimos uma base de erro que é uma mensagem consistente ao gerar um erro

Então, para nossa função, vamos copiar isso na parte inferior da nossa usePlaceCage.js Arquivo:

function generateCage(settings) {  const { type = DEFAULT_TYPE, width = 200, height = 200, count = 1 } = settings;  const config = [];      if ( type !== DEFAULT_TYPE && TYPES[type] ) {    config.push(TYPES[type]);  }      config.push(width, height);      if ( isNaN(count) ) {    throw new Error(`${ERROR_BASE}: Invalid count ${count}`);  }      return [...new Array(count)].map(() => `${PLACECAGE_HOST}${config.join('/')}`);}

Percorrendo este código:

• Nós definimos um generateCage função que usaremos para gerar nosso URL de imagem
• Tomamos um objeto de configurações como argumento, que define a configuração do URL da nossa imagem. Usaremos os mesmos parâmetros que vimos no URL placecage.com
• Desestruturamos essas configurações para torná-las disponíveis para uso
• Temos alguns padrões aqui apenas para facilitar. Nosso padrão type será definido por DEFAULT_TYPE juntamente com uma largura, altura e número de resultados padrão que queremos retornar
• Nós criamos um config array. Usaremos isso para anexar todos os diferentes objetos de configuração em nosso URL e, finalmente, juntá-los a um / essencialmente fazendo um URL
• Antes de enviarmos nossa configuração para esse array, verificamos se é um argumento válido, usando o TYPES objeto para verificar contra ele. Se for válido, enviamos para nosso array de configuração
• Empurramos então nossa largura e altura
• Fazemos uma verificação de tipo, se não tivermos um número válido como o count, lançamos um erro, caso contrário, obteremos resultados incorretos
• Por fim, retornamos uma nova matriz com o número de resultados solicitados, mapeados para um criador de URL, que usa PLACECAGE_HOST como nosso URL base definido e com nossa matriz de configuração unida por /

E se testássemos essa função, ficaria assim:

const cage = generateCage({  type: 'gif',  width: 500,  height: 500,  count: 2});console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

Usando nossa função no gancho

Então agora que temos nossa função de gerador, vamos usá-la no nosso gancho!

Dentro do usePlaceCage função no use-placecage/src/usePlaceCage.js arquivo, podemos adicionar:

export default function usePlaceCage (settings = {}) {  return generateCage(settings);}

O que isso faz usa nossa função de gerador, pega as configurações que foram passadas para o gancho e retorna esse valor do gancho.

Semelhante ao nosso exemplo de uso anterior, se usássemos nosso gancho, ficaria assim:

const cage = usePlaceCage({  type: 'gif',  width: 500,  height: 500,  count: 2});console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

Neste ponto, ele faz a mesma coisa!

Portanto, agora que temos o nosso gancho, ele serve como uma função para gerar URLs de imagem para o serviço placecage.com. Como podemos realmente usá-lo?

Siga junto com o commit!

Etapa 3: usando o gancho React em um exemplo

A boa notícia sobre nosso modelo é que ele já inclui um aplicativo de exemplo que podemos atualizar para usar facilmente nosso gancho para testar e fornecer documentação para aqueles que desejam usá-lo.

Configurando o gancho

Para começar, vamos abrir nossa example/pages/index.js Arquivo. Dentro deste arquivo, você verá o seguinte:

const hookSettings = {  message: 'Hello, custom hook!'}const { message } = usePlaceCage(hookSettings);

Esse snippet é o que foi usado por padrão no modelo apenas para uma prova de conceito, então vamos atualizar isso. Usaremos a mesma configuração exata da etapa 2:

const hookSettings = {  type: 'gif',  width: 500,  height: 500,  count: 2}const cage = usePlaceCage(hookSettings);

Novamente, configuramos nosso objeto de configurações com a configuração para nosso gancho e chamamos nosso gancho e definimos o valor como cage constante.

Se agora consolamos um registro que valoriza nossas ferramentas de desenvolvimento, podemos vê-lo funcionando!

console.log('cage', cage);

Nota: Se você receber um erro aqui sobre message, você pode comentar ou removê-lo na seção Exemplos.

Atualizando o exemplo com nossa nova configuração de gancho

Se você rolar para a seção Exemplos, notará que temos o mesmo padrão hookSettings Como acima, vamos atualizá-lo novamente para garantir que nosso exemplo seja preciso.

{`const hookSettings = {  type: 'gif',  width: 500,  height: 500,  count: 2}const cage = usePlaceCage(hookSettings);`}

Você também notará que não estamos mais usando o message variável. Se você não o removeu na última etapa, agora podemos substituí-lo no cabeçalho Saída por:

  { JSON.stringify(cage) }





  { cage.map((img, i) => )}

Estamos fazendo duas coisas aqui:

• Em vez de mostrar a variável em si, envolvemos-na com JSON.stringify para que possamos mostrar o conteúdo da matriz
• Também usamos o map para percorrer nossos URLs de imagem no diretório cage constante e crie um novo elemento de imagem para cada um. Vamos visualizar a saída em vez de apenas ver os valores

E depois de salvar e abrir o navegador, você deverá ver seus exemplos e resultados atualizados!

Outras coisas que você pode fazer nessa página

Antes de prosseguir, você também pode atualizar algumas outras coisas que serão importantes para a sua página de ganchos:

• Atualize o Como usar seção com instruções
• Adicione exemplos adicionais para facilitar que as pessoas saibam o que fazer

Algumas coisas também são extraídas automaticamente do use-placecage/package.json Arquivo. Você pode atualizá-los lá para facilitar a manutenção ou substituí-los na página de exemplo:

• name: É usado no


  da página

• description: É usado na descrição sob o


• repository.url: Usado para incluir um link para o repositório
• author: O name e url são usados ​​para incluir um link na parte inferior da página

Siga junto com o commit!

Etapa 4: Compilando seu gancho React e exemplo

A maneira como podemos fazer nosso gancho funcionar facilmente como um módulo npm é compilá-lo para que outros o usem. Estamos usando o babel para fazer isso.

Embora o processo de publicação já faça isso automaticamente para nós com o prepublishOnly script em use-placecage/package.json, podemos compilar manualmente nosso gancho usando o yarn build comando a partir da raiz do projeto.

Junto com a compilação do gancho, a execução yarn build também compilará a página de exemplo, permitindo que você faça o upload para onde quiser. Depois de executar esse comando, você verá uma saída de arquivos HTML estáticos no diretório example/out diretório.

Se você está procurando uma recomendação, Netlify facilita a conexão do seu Github conta e implante o site estático.

Veja o site de demonstração implantado no Netlify!

Etapa 5: publicando seu gancho React para npm

Finalmente, se você está satisfeito com o seu gancho, é hora de publicar!

O npm facilita essa parte. O único pré-requisito necessário para ter uma conta npm. Com essa conta, vamos fazer o login:

npm login

O que solicitará suas credenciais de login.

Em seguida, vamos navegar para o diretório do nosso gancho, pois nossa configuração de pacote está lá em use-placecage/package.json:

cd use-placecage

Então, podemos simplesmente publicar!

npm publish

Lembre-se de que cada nome de pacote precisa ser exclusivo. Se você usou use-placecage, já foi tomado … por mim. 😃

Mas se você tiver sucesso, o npm deve criar seu gancho e enviá-lo para o registro do pacote!

Ele estará disponível no npm com o seguinte padrão:

https://www.npmjs.com/package/[package-name]

Então para use-placeage, está disponível aqui: https://www.npmjs.com/package/use-placecage

Agora temos um gancho personalizado!

Sim, se você seguiu em frente, agora deve ter criado um gancho personalizado e publicado para o npm.

Embora este tenha sido um exemplo bobo usando placecage.com, ele nos dá uma boa idéia de como podemos configurá-lo facilmente.

Você também notará que este exemplo específico não era o melhor caso de uso para ganchos, onde poderíamos simplesmente usar uma função. Normalmente, queremos usar ganchos personalizados para agrupar funcionalidades que só podem viver dentro de um componente React, como useState. Para saber mais sobre isso, você pode ler um dos meus outros artigos sobre ganchos personalizados.

No entanto, isso nos deu uma boa base para conversarmos sobre a criação e configuração de nosso novo gancho!

Mais recursos sobre ganchos