Add Layer and Rectangle components to Recharts

[masenf]

Type of change

• New feature (non-breaking change which adds functionality)

New Feature Submission

This PR adds two new Recharts components to support constructing custom node elements:

• Layer: A wrapper around the Recharts Layer component that renders an SVG <g> element for grouping other SVG elements.
• Rectangle: A shape component for rendering rectangles with full support for positioning, sizing, styling, and animation properties.

Changes

1. packages/reflex-components-recharts/src/reflex_components_recharts/general.py:

   • Added Layer class with tag "Layer" and alias "RechartsLayer"
   • Added Rectangle class with comprehensive properties:
     • Positioning: x, y
     • Sizing: width, height, radius
     • Styling: fill, fill_opacity, stroke, stroke_width
     • Animation: is_animation_active, is_update_animation_active, animation_begin, animation_duration, animation_easing
   • Exported layer and rectangle factory functions

2. packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py:

   • Added exports for Layer, layer, Rectangle, and rectangle to the public API

3. tests/units/components/recharts/test_general.py (new file):

   • Added unit tests covering:
     • Basic Layer rendering
     • Layer with children (nesting Rectangle)
     • Basic Rectangle rendering
     • Rectangle with all supported properties

4. packages/reflex-components-recharts/news/+layer_rectangle.feature.md (new file):

   • Added changelog entry documenting the new components

Testing

• Added comprehensive unit tests in test_general.py covering component creation, rendering, and property handling
• Tests verify correct component names, child nesting, and property serialization

Checklist

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?
• Have you written new tests for your core changes, as applicable?
• pyi_hashes.json updated for modified .pyi files

https://claude.ai/code/session_01XqtAPUo84EBNq6c8Ext3mC

[greptile-apps]

Greptile Summary

This PR adds Recharts wrappers for custom SVG node construction. The main changes are:

• New Layer and Rectangle components in the Recharts general module.
• Package-root exports for the new classes and factory functions.
• Unit tests for rendering, nesting, and Rectangle prop serialization.
• Updated stub hashes and a feature news entry.

Confidence Score: 5/5

This looks safe to merge after a small API-doc cleanup.

• The new exports match the added component definitions.
• The wrapper props follow the existing Recharts serialization pattern.
• The only follow-up is a misleading Rectangle animation default in the doc text.

packages/reflex-components-recharts/src/reflex_components_recharts/general.py

Important Files Changed

Filename	Overview
packages/reflex-components-recharts/src/reflex_components_recharts/general.py	Adds Layer and Rectangle wrappers plus factories; one Rectangle animation default docstring does not match omitted-prop behavior.
packages/reflex-components-recharts/src/reflex_components_recharts/init.py	Adds the new classes and factories to the package lazy-export map using the established Recharts pattern.
tests/units/components/recharts/test_general.py	Adds tests for package-root imports, rendered names, child nesting, and Rectangle prop serialization.
pyi_hashes.json	Updates generated stub hashes for the changed Recharts package surfaces.
packages/reflex-components-recharts/news/+layer_rectangle.feature.md	Adds a short feature news entry for the new Layer and Rectangle wrappers.

_{Reviews (1): Last reviewed commit: "feat(recharts): add Layer and Rectangle ..." | Re-trigger Greptile}

[greptile-apps]

Animation Default Is Misstated

When is_animation_active is omitted, this wrapper does not emit isAnimationActive, so Recharts applies its own runtime default. The generated API docs currently say the default is False, which can lead callers to leave the prop unset and still see rectangle animations.

Suggested change

	is_animation_active: Var[bool] = field(
	doc="If set false, animation of the rectangle will be disabled. Default: False"
	)
	is_animation_active: Var[bool] = field(
	doc="If set false, animation of the rectangle will be disabled."
	)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[masenf]

Keeping the Default: False here — it's accurate. Unlike Bar/Area/Line (whose isAnimationActive defaults to true), the Rectangle shape defaults it to false in recharts 3.8.1:

// src/shape/Rectangle.tsx
export const defaultRectangleProps = {
  ...
  isAnimationActive: false,
  isUpdateAnimationActive: false,
  ...
} as const satisfies Partial<Props>;

So when the prop is omitted, recharts applies false (no animation), which is exactly what the docstring states. The other animation defaults (is_update_animation_active: False, animation_begin: 0, animation_duration: 1500, animation_easing: "ease") come from the same object and are documented to match.

---

Generated by Claude Code

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing claude/recharts-layer-rectangle-wrappers-wsq24d (7a5ebe8) with main (948c619)}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7a5ebe831e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Forward Layer SVG attributes instead of wrapperStyle

When users use Layer to build custom SVG nodes and pass common group attributes such as transform or style, those names are not declared on the wrapper, so Reflex treats them as style entries and this subclass then inherits Recharts._get_style, which serializes them as wrapperStyle. Recharts Layer expects normal SVG attributes on its <g> element, not wrapperStyle, so translated/styled custom node groups are silently rendered without those attributes.

Useful? React with 👍 / 👎.

[masenf]

Good catch, and accurate — an undeclared kwarg (or style=) folds into self.style, which Recharts._get_style emits as wrapperStyle, and recharts drops that on the bare <g>/<path>. Note this is the shared behavior of every recharts SVG-element wrapper (e.g. Cell), not something specific to these two, so I've kept it consistent here rather than diverging from the base _get_style convention in this PR.

For the custom-node use case the practical paths are:

• declared props — x/y/width/height/fill/stroke/… all serialize correctly;
• class_name — merged onto the <g>/recharts-layer group;
• custom_attrs={"transform": "translate(…)"} — raw SVG attributes pass straight through to the element.

Forwarding style to the SVG element for the whole recharts package (or just these primitives) is a reasonable follow-up, but it's a convention change I'd rather make deliberately across the package than one-off here.

---

Generated by Claude Code