registerFunctionComponent

JSAny registerFunctionComponent(

  1. DartFunctionComponent dartComponent, {

  2. String? displayName,
})

Creates a React function component from a Dart function.

This wraps a Dart function that takes a Map<String, Object?> of props and returns a ReactElement. The wrapper handles converting between JS and Dart types automatically.

Example:

final Counter = registerFunctionComponent((props) {
  final count = useState(props['initialCount'] as int? ?? 0);

return div(children: [
pEl('Count: ${count.value}'),
button(
text: 'Increment',
onClick: () => count.setWithUpdater((prev) => prev + 1),
),
]);
});


// Use in render:
createElement(Counter, createProps({'initialCount': 5}));

You can optionally provide a displayName for better debugging in React DevTools.

Implementation

JSAny registerFunctionComponent(
  DartFunctionComponent dartComponent, {
  String? displayName,
}) {
  ReactElement jsComponent(JSObject jsProps) {
    final dartified = jsProps.dartify();
    final props = (dartified is Map<Object?, Object?>)
        ? dartified.cast<String, Object?>()
        : <String, Object?>{};
    return dartComponent(props);
  }

final component = jsComponent.toJS;
return component;
}