<commit_before># Rails Components

Write reusable components in your rails views. It's not much more than a 
convenient wrapper around rails' `render`.

## Installation

Install the rails components gem by adding it to your Gemfile:

```rb
gem 'rails_components'
```

Include RailsComponents in your app/helpers/application_helper.rb:

```rb
module ApplicationHelper
  include RailsComponents
end
```

## Configuration

## Examples

[Bootstrap modal][bsmodal] component:

```erb
<%= component 'modal', id: "fun-modal", class: "another-class" do %>
  <%= component 'modal/header_default', "Cool" %>
  <%= component 'modal/body', id: "fun-modal" do %>
    <p>Everyone loves a modal.</p>
  <% end %>
  <%= component 'modal/footer_default', id: "fun-modal" %>
<% end %>
```


## Goals

- make it as easy to write reusable components
- feel familiar to existing rails helpers, like `link_to` or `content_tag` 

## TODO

- tests
- figure out how to make vim-rails jump to files (gf) properly

[bsmodal]: http://v4-alpha.getbootstrap.com/components/modal/<commit_msg>Update the examples in README<commit_after># Rails Components

Write reusable components in your rails views.

## Installation

Install the rails components gem by adding it to your Gemfile:

```rb
gem 'rails_components'
```

and make the `component` helper available in your views:

```rb
module ApplicationHelper
  include RailsComponents
end
```

## Usage

A component is a template that yields, in `app/views/components` by default

```erb
<!-- app/views/components/_my_cool_component.html.erb -->
<div class="my-cool-component">
  <%= yield %>
</div>
```

You can call `component 'the_component_name'` and pass it a block, and it works
like `render layout: ...`.

```erb
<div>
  <h1>My website!</h1>
  <%= component 'my_cool_component' do %>
    <p>It's great.</p>
  <% end %>
</div>

<!-- output: -->
<div>
  <h1>My website!</h1>
  <div class="my-cool-component">
    <p>It's great.</p>
  </div>
</div>
```

If you're just passing a string to your component, you can pass them an
argument instead of a block, like `link_to` or `content_tag`:

```erb
<%= component 'my_cool_component', "It's real good." %>

<!-- output: -->
<div class="my-cool-component">
  It&#39;s real good.
</div>
```

Sometimes your component doesn't need anything at all

```
<%= component 'logo' %>

<!-- output: -->
<div class="brand">
  <img src="logo.gif" alt="Us!" />
</div>
```

Components are given access to a special method: `props`.
`props` is the same as `local_assigns` except it includes reserved words like
`class`, making it useful for passing html attributes.

```erb
<!-- component -->
<%= content_tag :div, props do %>
  <%= yield %>
<% end %>

<!-- within any view: -->
<%= component 'box1', class: "box", data: { foo: 'bar' } do %>
  <p>my box!</p>
<% end %>

<!-- output -->
<div class="box" data-foo="bar">
  <p>my box!</p>
</div>
```

`props` has a method called `html` which combines it with additional html attributes:

```erb
<!-- component -->
<%= content_tag :div, props.html(class: "box") do %>
  <%= yield %>
<% end %>

<!-- output -->
<div class="big box">
  <p>my big box!</p>
</div>
```

If you're using haml, it already does this for you, and you can use props directly:

```haml
.box{ props }
  = yield
```


## Bigger Examples

[Bootstrap modal][bsmodal]:

```erb
```

[Basscss navigation]

## Configuration

TODO

## Goals

- make it as easy to write reusable components
- feel familiar to existing rails helpers, like `link_to` or `content_tag`

## TODO

- tests
- figure out how to make vim-rails jump to files (gf) properly
- point out that mixing erb and haml has issues

[bsmodal]: http://v4-alpha.getbootstrap.com/components/modal/
[bspanel]: http://v4-alpha.getbootstrap.com/components/card/
{'fraction_non_alphanumeric': 0.16269210386857447, 'fraction_numerical': 0.002649708532061473, 'mean_word_length': 3.9605781865965834, 'pattern_counts': {'":': 0, '<': 64, '<?xml version=': 0, '>': 64, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1609581', 'n_tokens_mistral': 1340, 'n_tokens_neox': 1230, 'n_words': 425}