npmComponent

String packageName,

String componentPath, {
Map<String, dynamic>? props,
List<ReactElement>? children,
JSAny? child,

})

Create a React element from any npm package's component.

packageName - The npm package name (e.g., 'react-native-paper') componentPath - The component name or path (e.g., 'Button' or 'Stack.Navigator') props - Optional props map children - Optional list of child elements child - Optional single child (text or element)

Returns NpmComponentElement on success, throws StateError on failure.

Examples

Basic usage:

final button = npmComponent(
  'react-native-paper',
  'Button',
  props: {'mode': 'contained'},
  child: 'Click'.toJS,
);

With children:

final container = npmComponent(
  '@react-navigation/native',
  'NavigationContainer',
  children: [navigator],
);

Implementation

NpmComponentElement npmComponent(
  String packageName,
  String componentPath, {
  Map<String, dynamic>? props,
  List<ReactElement>? children,
  JSAny? child,
}) {
  final moduleResult = loadNpmModule(packageName);
  final module = switch (moduleResult) {
    Success(:final value) => value,
    Error(:final error) => throw StateError(error),
  };
final componentResult = getComponentFromModule(module, componentPath);
final component = switch (componentResult) {
Success(:final value) => value,
Error(:final error) => throw StateError(error),
};
final jsProps = (props != null) ? createProps(props) : null;
final element = (children != null && children.isNotEmpty)
? createElementWithChildren(component, jsProps, children)
: (child != null)
? createElement(component, jsProps, child)
: createElement(component, jsProps);
return NpmComponentElement.fromJS(element);
}