Skip to content

use ruby 1.9 hash syntax in examples #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 1, 2014
Merged

use ruby 1.9 hash syntax in examples #50

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ Component = React.createClass

```erb
<!-- react_ujs will execute `React.renderComponent(HelloMessage({name:"Bob"}), element)` -->
<div data-react-class="HelloMessage" data-react-props="<%= {:name => 'Bob'}.to_json %>" />
<div data-react-class="HelloMessage" data-react-props="<%= {name: 'Bob'}.to_json %>" />
```

`react_ujs` will also scan DOM elements and call `React.unmountComponentAtNode` on page unload. If you want to disable this behavior, remove `data-react-class` attribute in `componentDidMount`.
Expand All @@ -89,17 +89,17 @@ To use `react_ujs`, simply `require` it after `react` (and after `turbolinks` if
There is a view helper method `react_component`. It is designed to work with `react_ujs` and takes a React class name, properties, and HTML options as arguments:

```ruby
react_component('HelloMessage', :name => 'John')
react_component('HelloMessage', name: 'John')
# <div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
```

By default, a `<div>` element is used. Other tag and HTML attributes can be specified:

```ruby
react_component('HelloMessage', {:name => 'John'}, :span)
react_component('HelloMessage', {name: 'John'}, :span)
# <span data-...></span>

react_component('HelloMessage', {:name => 'John'}, {:id => 'hello', :class => 'foo', :tag => :span})
react_component('HelloMessage', {name: 'John'}, {id: 'hello', class: 'foo', tag: :span})
# <span class="foo" id="hello" data-...></span>
```

Expand Down Expand Up @@ -139,10 +139,10 @@ window.Component = Component

#### View Helper

To take advantage of server rendering, use the same view helper `react_component`, and pass in `:prerender => true` in the `options` hash.
To take advantage of server rendering, use the same view helper `react_component`, and pass in `prerender: true` in the `options` hash.

```erb
react_component('HelloMessage', {:name => 'John'}, {:prerender => true})
react_component('HelloMessage', {name: 'John'}, {prerender: true})
```
This will return the fully rendered component markup, and as long as you have included the `react_ujs` script in your page, then the component will also be instantiated and mounted on the client.

Expand Down