HasDomAttrs

Helper methods for dealing with html element attributes.

Install the gem and add to the application's Gemfile by executing:

$ bundle add has_dom_attrs

If bundler is not being used to manage dependencies, install the gem by executing:

$ gem install has_dom_attrs

Include HasDomAttrs in your class:

class Component
  include HasDomAttrs
end

This makes your component respond to dom_attrs, which returns a hash of class, data, aria, and style attributes, that can be passed to Rails tag helpers.

component = Component.new
tag.div "Hello world", **component.dom_attrs

You can define attributes using class methods:

class DetailsComponent
  include HasDomAttrs

  has_dom_attr :open

  attr_reader :open

  def initialize(open: false)
    @open = open
  end
end

component = Component.new(open: true)
component.dom_attrs
# => { open: "true" }

Likewise you can set classes, data, style, and aria attributes:

class ModalComponent
  include HasDomAttrs

  has_dom_attr :open
  has_dom_class -> { "modal--width_#{width}" }
  has_dom_aria :modal, if: :open
  has_dom_data :width
  has_dom_style :font_size, -> { "12px" }

  attr_reader :open

  def initialize(open: false, width: :m)
    @open = open
    @width = width
  end
end

component = ModalComponent.new(open: true, width: :l)
component.dom_attrs
# => { open: "true", aria: { modal: true }, class: "modal--width_l", data: { width: "l" }, style: "font-size: 12px; }

After 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.

To 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.

Bug reports and pull requests are welcome on GitHub at https://github.com/tomasc/has_dom_attrs.