HasDomAttrs

Helper methods for dealing with html element attributes.

Installation

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

Usage

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; }

Development

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.

Contributing

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