Se você já se pegou confuso com o erro "useContext must be inside a Provider" ou ainda não entendeu direito como o Context se propaga na árvore de componentes do React, conheça o ContextCraft — uma ferramenta interativa criada para descomplicar o Context API.

O que é o ContextCraft?

O ContextCraft é uma ferramenta educativa que te ajuda a visualizar, testar e entender como a Context API do React funciona na prática.

Com uma interface intuitiva e exemplos interativos, você consegue experimentar diferentes cenários com Providers, Consumers, múltiplos Contexts e observar em tempo real o que acontece com os dados — tudo de forma visual e guiada.

Ideal para quem?

Está aprendendo React e quer entender melhor como compartilhar estado entre componentes.

Já teve dúvidas sobre como a Context API funciona "por baixo dos panos".

Sofre com erros como useContext must be inside a Provider.

Quer aprender boas práticas, identificar armadilhas comuns e evitar anti-patterns no uso de Context.

Por que eu criei o ContextCraft?

Ao longo da minha jornada como desenvolvedor (+15 anos), tive muitas dificuldades (acredito que como muita gente) para entender algo e aplicar em um código. Na época que comecei, não tinha IA, era só a documentação e meu poder de raciocínio lógico (que não é lá estas coisas 😁). Atualmente, na era do React, percebi que muitos tutoriais explicam a Context API apenas de forma teórica. Mas, na prática, surgem dúvidas que só a experiência (ou uma boa visualização) conseguem resolver.

Foi daí que nasceu a ideia: criar uma ferramenta simples, visual e prática para ajudar outras pessoas a aprender fazendo e explorando.

Na verdade, eu tinha esta ferramenta na minha máquina há um bom tempo, mas nunca consegui (por falta de tempo) passar pro git. Vou passar outras coisas pro meu git e vou postando aqui.

Quer experimentar?
👉 Acesse aqui: https://luiztux.github.io/context-craft/

Quem quiser contribuir, dar feedback, etc., tá no git:
🐙https://github.com/luiztux/context-craft.git