React Search Card

This example shows the kind of React-shaped component that @litsx/babel-preset-react-compat is meant to carry during migration.

• memo(...)
• forwardRef(...)
• useState(...), useRef(...), useDeferredValue(...), useMemo(...)
• lazy(...) and Suspense

The point is not that this is the final native Lit^sx style. The point is that you can keep this authored shape while moving a codebase toward Lit^sx.

Full Migration Shape

Ref As Prop

This smaller example isolates the forwardRef-style path handled inside the React compatibility preset.

What To Notice

• this is migration-oriented source, not the recommended native end state
• the preset owns the React-only lowering details
• once the migration stabilizes, the next step is to move toward native Lit^sx primitives and bindings

Next

• Migrating from React
• Transform Recipes