skills.rest
dojoengine
dojoengineOFFICIAL
Explore all skills by this author →
Website𝕏@ohayo_dojoGitHub

dojo-react

Integrate React with Dojo.js using provider wiring and the useDojoSDK hook.

37|54|Updated Sep 11, 2023
Search Tags:#react#sdk#patterns#provider#infinite-scroll#dojo#effect-atoms
One-click install
npx skills add https://github.com/dojoengine/dojo.js --skill dojo-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dojo-react
Source: https://github.com/dojoengine/dojo.js/tree/main/.claude/skills/dojo-react
Command: npx skills add https://github.com/dojoengine/dojo.js --skill dojo-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Simplifies building React apps with Dojo.js by providing ready-to-use integration patterns, state management primitives, and safe UI composition strategies.

Core Features & Use Cases

  • Provider integration: StarknetConfig + DojoSdkProvider to wire Dojo runtime into React.
  • useDojoSDK hook: access sdk, config, client, provider, and store.
  • Effect Atoms: manage async data and reactivity via entity queries and updates.
  • Infinite Scroll: built-in patterns for paginated lists.
  • Error boundaries and safe composition: using React error boundaries and resilient UI patterns.

Quick Start

Wrap your app with StarknetConfig and DojoSdkProvider, then build components using the useDojoSDK hook and effect atoms.

Frequently Asked Questions about dojo-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Dojo.js with a React frontend application?▼

To integrate Dojo.js with React, wrap your app using StarknetConfig and DojoSdkProvider to wire the runtime, then access sdk, client, and store within components via the useDojoSDK hook.

What are effect atoms in React web3 apps for async state management?▼

Effect atoms manage async data and reactivity in React web3 apps by handling entity queries and updates, providing a pattern to fetch and synchronize on-chain state changes without manual polling logic.

Can I implement infinite scroll for entity queries in a React Dojo app?▼

Yes, you can implement infinite scroll for entity queries in a React Dojo app using built-in pagination patterns designed to fetch and render large lists of on-chain data incrementally.

How do I handle errors when querying on-chain entities in React?▼

Handle on-chain entity query errors in React by applying error boundaries and resilient UI composition patterns, isolating component failures to prevent the entire web3 application from crashing.

Do I need StarknetConfig to set up a Dojo provider in React?▼

Yes, StarknetConfig is required alongside DojoSdkProvider to properly initialize and wire the Dojo runtime into your React component tree before accessing any hooks or state.

What is the best way to access the Dojo SDK and client inside React components?▼

The best way to access the Dojo SDK and client inside React components is the useDojoSDK hook, which exposes sdk, config, client, provider, and store directly for UI integration.

Related Skills

Explore More Software Engineering Skills→
shariqazeemshariqazeem
1

controller-react

Integrate Cartridge Controller into React apps for popup-free Starknet authentication.

Community
Intermediate
Await-0xAwait-0x

dojo-deploy

Automate Dojo world deployment to Katana, Sepolia, and Starknet mainnet.

Community
Advanced
fgarofalo56fgarofalo56
6

state-management

Guide React state management with Zustand, Redux Toolkit, Jotai, and React Query.

Community
Advanced
damien-schneiderdamien-schneider
32

convex-quickstart

Initialize and configure Convex backend services for web applications.

Community
Intermediate