diff --git a/README.md b/README.md index b4105cf..9d58991 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,30 @@ Add to your `mix.exs` and run `mix deps.get`: ```elixir def deps do [ - {:phoenix_live_react, "~> 0.2.0"} + {:phoenix_live_react, "~> 0.2"} ] end ``` +Then add to your `assets/package.json` and run `npm i` or `yarn`: + +``` +{ + ... + "dependencies": { + ... + "phoenix": "file:../deps/phoenix", + "phoenix_html": "file:../deps/phoenix_html", + "phoenix_live_view": "file:../deps/phoenix_live_view", + "phoenix_live_react": "file:../deps/phoenix_live_react", <-- ADD THIS! + ... + }, + ... +} +``` + +Note for umbrella projects the relative file paths should look like `"file:../../../deps/phoenix_live_react"` + ## Usage Add your react components to the window scope (`app.js`): diff --git a/lib/phoenix_live_react.ex b/lib/phoenix_live_react.ex index d2579c4..90be44c 100644 --- a/lib/phoenix_live_react.ex +++ b/lib/phoenix_live_react.ex @@ -37,6 +37,9 @@ defmodule PhoenixLiveReact do You can also override the tag type with the `:container_tag` and `:receiver_tag` options + By default, LiveView uses `phx-` as the binding prefix. You can override this with the + `:binding_prefix` option. + ``` <%= PhoenixLiveReact.live_react_component("Components.MyComponent", %{}, @@ -56,6 +59,7 @@ defmodule PhoenixLiveReact do defp receiver_element(name, props, options) do attr = Keyword.get(options, :receiver, []) tag = Keyword.get(options, :receiver_tag, :div) + binding_prefix = Keyword.get(options, :binding_prefix, "phx-") default_attr = [ style: "display: none;", @@ -63,7 +67,7 @@ defmodule PhoenixLiveReact do live_react_class: name, live_react_props: Jason.encode!(props) ], - "phx-hook": "LiveReact" + "#{binding_prefix}hook": "LiveReact" ] content_tag(tag, "", Keyword.merge(default_attr, attr)) @@ -72,7 +76,9 @@ defmodule PhoenixLiveReact do defp container_element(options) do attr = Keyword.get(options, :container, []) tag = Keyword.get(options, :container_tag, :div) - default_attr = ["phx-update": "ignore"] + binding_prefix = Keyword.get(options, :binding_prefix, "phx-") + + default_attr = ["#{binding_prefix}update": "ignore"] content_tag(tag, "", Keyword.merge(default_attr, attr)) end diff --git a/mix.exs b/mix.exs index 20a7fd8..3c77378 100644 --- a/mix.exs +++ b/mix.exs @@ -4,7 +4,7 @@ defmodule PhoenixLiveReact.MixProject do def project do [ app: :phoenix_live_react, - version: "0.2.0", + version: "0.2.1", elixir: "~> 1.9", start_permanent: Mix.env() == :prod, package: package(),