# `mix xenia.gen.component`
[🔗](https://github.com/uzaydurdu/xenia/blob/v0.1.1/lib/mix/tasks/xenia.gen.component.ex#L1)

Generates a component for a JavaScript library: the adapter that drives
the library, and a typed HEEx tag for it.

    $ mix xenia.gen.component chart data:map title:string --events click
    * creating assets/js/chart_adapter.js
    * creating lib/my_app_web/components/chart.ex

Then it prints the one line to add to `app.js`. The adapter is a working
placeholder that shows the props it receives; replace its body with your
library (see the "Wrapping a library" guide).

Props are `name:type` pairs, with the types of Phoenix's `attr`: `string`,
`integer`, `float`, `boolean`, `atom`, `list`, `map` or `any`. Each
`--events` name becomes an `on_<name>` attribute.

## Co-located

    $ mix xenia.gen.component chart data:map --colocated

writes nothing, and prints the declaration and the
`<script :type={Phoenix.LiveView.ColocatedHook}>` to paste into the one
module that uses the component, usually a page. The adapter then lives in
that module, and `app.js` doesn't change. Generators don't edit your
modules, so it is printed rather than inserted.

## Options

  * `--events` - comma-separated event names, like `click,change`
  * `--colocated` - print a co-located version instead of writing files
  * `--module` - the tag's module, `MyAppWeb.Components.Chart` by default
  * `--web-module` and `--web-path` - `MyAppWeb` and `lib/my_app_web` by
    default
  * `--force` - overwrite existing files

---

*Consult [api-reference.md](api-reference.md) for complete listing*