{"id":19474608,"url":"https://github.com/tomasc/has_dom_attrs","last_synced_at":"2026-07-13T22:32:36.448Z","repository":{"id":142764630,"uuid":"610649824","full_name":"tomasc/has_dom_attrs","owner":"tomasc","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-18T15:38:05.000Z","size":19,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-26T14:45:06.014Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomasc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-07T07:48:33.000Z","updated_at":"2024-07-25T10:54:08.823Z","dependencies_parsed_at":null,"dependency_job_id":"87522124-8586-4757-a8ab-1dd69e752f77","html_url":"https://github.com/tomasc/has_dom_attrs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasc%2Fhas_dom_attrs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasc%2Fhas_dom_attrs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasc%2Fhas_dom_attrs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasc%2Fhas_dom_attrs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomasc","download_url":"https://codeload.github.com/tomasc/has_dom_attrs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240697716,"owners_count":19843252,"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":[],"created_at":"2024-11-10T19:25:51.414Z","updated_at":"2025-10-18T19:59:37.027Z","avatar_url":"https://github.com/tomasc.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HasDomAttrs\n\n[![HasDomAttrs](https://github.com/tomasc/has_dom_attrs/actions/workflows/ruby.yml/badge.svg)](https://github.com/tomasc/has_dom_attrs/actions/workflows/ruby.yml)\n\nHelper methods for dealing with html element attributes.\n\n## Installation\n\nInstall the gem and add to the application's Gemfile by executing:\n\n    $ bundle add has_dom_attrs\n\nIf bundler is not being used to manage dependencies, install the gem by executing:\n\n    $ gem install has_dom_attrs\n\n## Usage\n\nInclude `HasDomAttrs` in your class:\n\n```ruby\nclass Component\n  include HasDomAttrs\nend\n```\n\nThis makes your component respond to `dom_attrs`, which returns a hash of class, data,\naria, and style attributes, that can be passed to Rails tag helpers.\n\n```ruby\ncomponent = Component.new\ntag.div \"Hello world\", **component.dom_attrs\n```\n\nYou can define attributes using class methods:\n\n```ruby\nclass DetailsComponent\n  include HasDomAttrs\n\n  has_dom_attr :open\n\n  attr_reader :open\n\n  def initialize(open: false)\n    @open = open\n  end\nend\n```\n\n```ruby\ncomponent = DetailsComponent.new(open: true)\ncomponent.dom_attrs\n# =\u003e { open: \"true\" }\n```\n\nLikewise you can set classes, data, style, and aria attributes:\n\n```ruby\nclass ModalComponent\n  include HasDomAttrs\n\n  has_dom_attr :open\n  has_dom_class -\u003e { \"modal--width_#{width}\" }\n  has_dom_aria :modal, if: :open\n  has_dom_data :width\n  has_dom_style :font_size, -\u003e { \"12px\" }\n\n  attr_reader :open, :width\n\n  def initialize(open: false, width: :m)\n    @open = open\n    @width = width\n  end\nend\n```\n\n```ruby\ncomponent = ModalComponent.new(open: true, width: :l)\ncomponent.dom_attrs\n# =\u003e { open: \"true\", aria: { modal: true }, class: \"modal--width_l\", data: { width: \"l\" }, style: \"font-size: 12px;\" }\n```\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/tomasc/has_dom_attrs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomasc%2Fhas_dom_attrs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomasc%2Fhas_dom_attrs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomasc%2Fhas_dom_attrs/lists"}