React (Lightning v2.12.3-pre)

View Source

A way to use React with Phoenix LiveView.

Summary

Functions

Generates a unique ID for a React component.

Returns a list of React components that are defined in the given app.

Associates a JSX file with a component. File paths are relative to the assets/js/react directory. Such files will become entrypoints for ESBuild, but common code is code-split by ESBuild into separate chunks.

Functions

component_id(name)

@spec component_id(String.t()) :: String.t()

Generates a unique ID for a React component.

get_entry_points(app)

@spec get_entry_points(atom()) :: [String.t()]

Returns a list of React components that are defined in the given app.

json(data)

jsx(relative_file)

(macro)

Associates a JSX file with a component. File paths are relative to the assets/js/react directory. Such files will become entrypoints for ESBuild, but common code is code-split by ESBuild into separate chunks.

A custom Mix compiler will ensure these files are compiled.

Example

defmodule Button do
  use React.Component

  jsx "components/Button.tsx"
end