search

fidr / phoenix_live_react

Render React.js components in Phoenix LiveView views
MIT License
238 stars 42 forks source link

Add ID to live react component hook wrapper #6

Closed AcePetrucci closed 4 years ago

AcePetrucci commented 4 years ago

Live React Component Wrapper ID

Description

Passing an id to the live_react_component wrapper doesn't mean that the same ID will be applied to the element using the LiveReact Hook call, so Phoenix complains about the LiveReact Hook not having a DOM ID.

Example

<%= live_react_component("Components.ShipmentWrapperComponent", %{}, id: "shipment-wrapper-component") %>

image

Solution

Add an id attr using Keyword.get/3.

default_attr = [
  style: "display: none;",
  id: Keyword.get(options, :id),
  data: [
    live_react_class: name,
    live_react_props: Jason.encode!(props),
    live_react_merge: options[:merge_props] == true
  ],
  "#{binding_prefix}hook": "LiveReact"
]
fidr commented 4 years ago

Thanks for the PR!

I guess both the phx-hook and the phx-update="ignore" need a DOM ID now. I will merge this PR and change the container id to "#{id}-container" so the id's are unique.