{"id":15647020,"url":"https://github.com/san650/phoenix_components","last_synced_at":"2025-04-14T10:21:09.675Z","repository":{"id":57531851,"uuid":"93970043","full_name":"san650/phoenix_components","owner":"san650","description":"This library helps you write encapsulated bits of HTML into a single unit called components to use in your server rendered Phoenix application. Similar to how react/ember/web components do.","archived":false,"fork":false,"pushed_at":"2021-07-16T12:31:47.000Z","size":44,"stargazers_count":46,"open_issues_count":6,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-27T23:33:00.399Z","etag":null,"topics":["components","elixir","phoenix"],"latest_commit_sha":null,"homepage":null,"language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/san650.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-10T23:05:00.000Z","updated_at":"2023-09-02T02:29:40.000Z","dependencies_parsed_at":"2022-08-27T16:02:31.422Z","dependency_job_id":null,"html_url":"https://github.com/san650/phoenix_components","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fphoenix_components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fphoenix_components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fphoenix_components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fphoenix_components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/san650","download_url":"https://codeload.github.com/san650/phoenix_components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248744208,"owners_count":21154821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","elixir","phoenix"],"created_at":"2024-10-03T12:16:25.350Z","updated_at":"2025-04-14T10:21:09.654Z","avatar_url":"https://github.com/san650.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# phoenix_components\n\n[![Build Status](https://travis-ci.org/san650/phoenix_components.svg?branch=master)](https://travis-ci.org/san650/phoenix_components)\n\nThis library helps you write encapsulated bits of HTML into a single unit called\ncomponent in your server rendered Phoenix web site. Similar to how\nreact/ember/web components do.\n\n## Table of content\n\n* [Synopsis](#synopsis)\n* [Installation](#installation)\n* [Quick start](#quickstart)\n* [Configuration](#configuration)\n* [License](#license)\n\n## Synopsis\n\nYou can generate a new component with the built-in generator\n\n```\n$ mix phoenix.gen.component button\n* creating web/components/button/view.ex\n* creating web/components/button/template.html.eex\n* creating test/components/button_test.exs\n```\n\nThen you can use the new component in a template\n\n```ex\n# /web/views/page_view.ex\ndefmodule MyApp.PageView do\n  use MyApp.Web, :view\n  use PhoenixComponents.View\n\n  import_components [:button]\nend\n```\n\n```eex\n# /web/templates/page/show.html.eex\n\n\u003c%= button type: :primary do %\u003e\n  My cool button!\n\u003c% end %\u003e\n```\n\nWith the corresponding component definition\n\n```ex\n# /web/components/button/view.ex\ndefmodule MyApp.Components.ButtonView do\n  use PhoenixComponents.Component\n\n  def class_for_type(type) do\n    \"btn btn--\" \u003c\u003e to_string(type)\n  end\nend\n```\n\n```eex\n# /web/components/button/template.html.eex\n\u003cbutton class=\"\u003c%= class_for_type @attrs.type %\u003e\"\u003e\n  \u003c%= @content %\u003e\n\u003c/button\u003e\n```\n\n## Installation\n\nAdd `phoenix_components` to your `mix.exs` deps:\n\n```elixir\ndef deps do\n  [{:phoenix_components, \"~\u003e 1.0.0\"}]\nend\n```\n\nand then you have to add one config to your config file\n\n```elixir\nconfig :phoenix_components, app_name: MyApp\n```\n\nwhere `MyApp` is the module that represents your phoenix app.\n\n### Extra step for Elixir 1.3 and lower\n\nIf you're running Elixir 1.3 or lower, don't forget to add it under you\napplications list in mix.exs\n\n```ex\ndef application do\n  [applications: [:phoenix_components]]\nend\n```\n\n## Quick start\n\nThis is a quick overview of how to create and use a component in your\napplication.\n\n### 1. Importing PhoenixComponents.View in all application views\n\nAfter installing the dependency you need to configure your application.\n\nYou can do this by adding this line to your `web/web.ex` file\n\nLook for the line `def view do` and update it to include this line\n\n```ex\ndef view do\n  quote do\n    use Phoenix.View, root: \"web/templates\"\n    use PhoenixComponents.View # Add this line\n    ...\n```\n\n### 2. Creating a `button` component\n\nPhoenix components are defined by two different parts, a view and a template.\nThe view contains helper functions and the template contains the HTML.\n\nTo create a button component you need to create the view file\n`web/components/button/view.ex` with the following content\n\n```ex\ndefmodule MyApp.Components.Button do\n  use PhoenixComponents.Component\n\n  def classes do\n    \"btn btn-default\"\n  end\nend\n```\n\nThen create the template file `web/components/button/template.html.eex` with the\nfollowing content\n\n```eex\n\u003cbutton class=\"\u003c%= classes %\u003e\"\u003e\n  \u003c%= @content %\u003e\n\u003c/button\u003e\n```\n\nNote that `@content` variable will contain the content defined inside the button\nblock. Next section shows this in more detail.\n\n### 3. Using the component\n\nYou can use the component from any template by using the helper function\n`component`.\n\nIn any template, e.g. `web/templates/pages/show.html.eex` add the button\ncomponent.\n\n```eex\n\u003c%= component :button do %\u003e\n  My cool button!\n\u003c% end %\u003e\n```\n\nThe content inside the component block is passed to the component as the\n`@content` variable.\n\n### 4. Importing components into views\n\nYou can import the components in any view by using the `import_components`\nfunction. This allows you to avoid having to call `component` helper and instead\njust use the name of the component.\n\n```eex\ndefmodule MyApp.PageView do\n  use Phoenix.Web, :view\n  import_components [:button, :jumbotron]\nend\n```\n\nThen you can use these helpers from your templates\n\n```eex\n\u003c%= button type: :submit do %\u003e\n  Submit form!\n\u003c% end %\u003e\n```\n\n### 5. Using attributes inside your components\n\nWhen calling a component you can pass any attribute you like.\n\n```eex\n\u003c%= button type: :submit do %\u003e\n  Submit form!\n\u003c% end %\u003e\n```\n\nInside the component's template these attributes are going to be available in\nthe `@attrs` map.\n\n```eex\n\u003cbutton type=\"\u003c%= @attrs.type %\u003e\"\u003e\n  \u003c%= @content %\u003e\n\u003c/button\u003e\n```\n\n## Configuration\n\nYou can configure where to put the components by editing your application\nconfiguration file `config/config.exs`.\n\n```ex\nconfig :phoenix_components, path: \"lib/foo/bar\"\n```\n\nComponents are obtained from `web` by default.\n\n## Project's health\n\n[![Build Status](https://travis-ci.org/san650/phoenix_components.svg?branch=master)](https://travis-ci.org/san650/phoenix_components)\n[![codebeat badge](https://codebeat.co/badges/135fa334-d08a-4b0a-8bc5-1ae5ea0c939a)](https://codebeat.co/projects/github-com-san650-phoenix_components-master)\n[![Ebert](https://ebertapp.io/github/san650/phoenix_components.svg)](https://ebertapp.io/github/san650/phoenix_components)\n[![Coverage Status](https://coveralls.io/repos/github/san650/phoenix_components/badge.svg?branch=master)](https://coveralls.io/github/san650/phoenix_components?branch=master)\n\n## License\n\nphoenix_components is licensed under the MIT license.\n\nSee [LICENSE](./LICENSE) for the full license text.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsan650%2Fphoenix_components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsan650%2Fphoenix_components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsan650%2Fphoenix_components/lists"}