Embed client configuration for a shape into your HTML.

<Electric.Phoenix.Component.electric_client_configuration
  shape={MyApp.Todo}
  key="todo_shape_config"
/>

This will put a <script> tag into your page setting window.todo_shape_config to the configuration needed to subscribe to changes to the MyApp.Todo table.

<script>
  window.todo_shape_config = {"url":"https://localhost:3000/v1/shape/todos" /* , ... */}
</script>

If you include a :script slot then you have complete control over how the configuration is applied.

<Electric.Phoenix.Component.electric_client_configuration shape={MyApp.Todo}>
  <:script :let={configuration}>
    const container = document.getElementById("root")
    const root = createRoot(container)
    root.render(
      React.createElement(
        MyApp, {
          client_config: <%= configuration %>
        },
        null
      )
    );
  </:script>
</Electric.Phoenix.Component.electric_client_configuration>

The configuration variable in the :script block is the JSON-encoded client configuration.

<script>
  const container = document.getElementById("root")
  const root = createRoot(container)
  root.render(
    React.createElement(
      MyApp, {
        client_config: {"url":"https://localhost:3000/v1/shape/todos" /* , ... */}
      },
      null
    )
  );
</script>

Attributes

• shape (:any) (required) - The Ecto query (or schema module) to subscribe to.
• key (:string) - The key in the top-level window object to put the configuration object. Defaults to "electric_client_config".
• client (:any) - Optional client. If not set defaults to Electric.Phoenix.client!().

Slots

• script - An optional inner block that allows you to override what you want to do with the configuration JSON.