Using react components

[c6p]

import { createElement } from 'npm:react';
import { createRoot } from 'npm:react-dom/client';
import { MultiSelect } from 'npm:@mantine/core';
display(createRoot)

Displays TypeError: error loading dynamically imported module: http://127.0.0.1:3000/_npm/[email protected]/client.

[c6p]

Updated.

Define root div to mount our component. Note: selected is reactive. Yay!

<link rel="stylesheet" href="npm:@mantine/core/styles.css" />
<div id="root"></div>

Selected values: ${selected.join(', ')}

I've found out easiest way to manage state via Mutable. Here we define a reusable useState hook as in react.

import {Mutable} from "npm:@observablehq/stdlib";
function useState(value) {
  const state = Mutable(value)
  const setState = (value) => state.value = value;
  return [state, setState]

}
const [selected, setSelected] = useState(["react"])

I misunderstood how observable renders the page. It was enough to just import them as you would in node.
Since JSX is not supported, use createElement.

import {createElement} from 'npm:react';
import {createRoot} from 'npm:react-dom';
import { MultiSelect, MantineProvider } from 'npm:@mantine/core';
const root = createRoot(document.getElementById('root'));
root.render(
    createElement(MantineProvider, {},
        createElement(MultiSelect, {
          label: "your favorite libraries",
          placeholder: "pick value",
          data: ['react', 'angular', 'vue', 'svelte'],
          value: selected,
          clearable: true,
          searchable: true,
          onChange: setSelected
        })
    )
)

[Fil]

Nice! Can you share a more complete example?

[c6p]

Updated the answer with a complete example.

[Fil]

<link rel="stylesheet" href="npm:@mantine/core/styles.css" /> seems to work—it copies the css file and self-hosts it under http://127.0.0.1:3000/_npm/@mantine/[email protected]/styles.css) (using [email protected] which was released yesterday).

[c6p]

You are right! After a npm update, it works.