Skip to content

rainchen/react-rails-img

Repository files navigation

react-rails-img

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

Build Status Gem

Installation

  1. Add this line to your application's Gemfile:
gem 'react-rails-img'

And then execute:

$ bundle
  1. Require the javascript file in app/assets/javascripts/application.js:
//= require react_rails_img

Usage

React Component Style

the asset adds a <Img> component

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

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

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

    1. this feature requires gem 'css_sprite'

    2. css_sprite images should be placed in dir assets/images/css_sprite/

    3. put the string css_sprite after /assets/ in the path

JS funtion Style

just similar to rails helper image_tag

  1. base usage: e.g.: imageTag('logo.png')
  2. 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

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

About

simple image helpers for the rails project using react

Resources

Stars

Watchers

Forks

Packages

No packages published