rimmel icon indicating copy to clipboard operation
rimmel copied to clipboard

feat: Add React interop adapter

Open TudorGR opened this issue 1 month ago • 2 comments

Implements WrapForReact() to enable seamless use of Rimmel components inside React applications.

Features:

  • Converts React props to BehaviorSubject observables
  • Maintains Rimmel's no-re-render reactive model
  • Proper lifecycle management and cleanup
  • React as optional peer dependency (zero bloat for non-React users)

Usage:

const ReactCounter = WrapForReact(RimmelComponent);
<ReactCounter externalCounter={reactState} />

Example included at react-interop demonstrating bidirectional reactivity.

Closes #71

TudorGR avatar Nov 15 '25 07:11 TudorGR

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

I addressed both concernes:

1. Lazy observable creation Used Proxy pattern to only create BehaviorSubjects when components actually access props—no more unnecessary subjects for unused props.

2. Dependency isolation Moved React adapter to separate @rimmel/in-react package. Main Rimmel package no longer pulls in React as a peer dependency.

Migration for users:

npm install @rimmel/in-react
import { WrapForReact } from '@rimmel/in-react';

Testing:

  • Package builds successfully
  • Example project verified working
  • No breaking changes for non-React users

TudorGR avatar Nov 20 '25 08:11 TudorGR