Enforce Canvas children restrictions and update docs#14
Conversation
Added runtime validation to warn when DOM elements are used as children of the Canvas component in development mode. Updated documentation in CLAUDE.md and README.md to clarify that only react-two.js components are allowed inside Canvas, with examples of correct and incorrect usage.
|
@claude can you review this PR? |
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds runtime validation to prevent incompatible DOM elements from being used inside the Canvas component, following the pattern established by react-three-fiber. The validation runs in development mode only and warns developers when they attempt to use DOM elements inside Canvas.
- Implements
validateChildrenfunction that recursively checks for DOM elements in Canvas children - Adds development-mode warnings when incompatible children are detected
- Updates documentation in README.md and CLAUDE.md with usage examples and restrictions
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| lib/Provider.tsx | Adds validateChildren function and integrates validation into the Provider component (exported as Canvas) |
| README.md | Adds important notice section explaining Canvas children restrictions with correct/incorrect examples |
| CLAUDE.md | Documents Canvas restrictions in Core Components section and adds Common Issues & Solutions entry |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
lib/Provider.tsx
Outdated
| * Validates that children are compatible with react-two.js Canvas. | ||
| * Warns in development mode if DOM elements or incompatible components are found. | ||
| */ | ||
| function validateChildren(children: React.ReactNode, depth = 0): void { |
There was a problem hiding this comment.
The depth parameter is declared but never used in the function. If it's intended for future use (e.g., limiting recursion depth), consider adding a comment explaining this. Otherwise, remove the unused parameter.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: jonobr1 <220033+jonobr1@users.noreply.github.com>
Remove unused depth parameter from validateChildren
Added runtime validation to warn when DOM elements are used as children of the Canvas component in development mode. Updated documentation in CLAUDE.md and README.md to clarify that only react-two.js components are allowed inside Canvas, with examples of correct and incorrect usage.