react-rails-img

react-rails-img

Simple image helpers for the rails project using react, make it easily just like using the <img> tag.

Installation

• Add this line to your application's Gemfile:

gem 'react-rails-img'

And then execute:

$ bundle

2. Require the javascript file in app/assets/javascripts/application.js:

//= require react_rails_img

Usage

React Component Style

the asset adds a <Img> component

• base usage: e.g.: <Img src="/assets/logo.png" />

• with props: e.g.: <Img src="/assets/logo.png" alt="logo" className="logo" id="logo" width=100 height=50 />

• advance usage - using cssSprite: e.g.: <Img src="/assets/css_sprite/logo.png" />

  • this feature requires gem 'css_sprite'

  • css_sprite images should be placed in dir assets/images/css_sprite/

  • put the string css_sprite after /assets/ in the path

JS funtion Style

just similar to rails helper image_tag

• base usage: e.g.: imageTag('logo.png')
• with props: e.g.: imageTag('path/logo.png', {alt: 'logo', className: 'logo', id: 'logo', width: 100, height: 50})

helper for getting image path

e.g.: Img.assetPath('placeholder/logo.png')

Acknowledgements

the image path will respect Rails.env, for development it will be sth like

/assets/logo.png

and for production, it will be contains the timestamp as

/assets/logo-be1f67ffd42a4c1a41bdcc547c5705a3423a2f24bfe930f00398077fe518e6c0.png

Contributing

• Fork it ( https://github.com/rainchen/react-rails-img/fork )
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin my-new-feature)
• Create a new Pull Request