React Radium

  • Radium is a collection of tools to manage styles in a ReactJS element.
  • Some of the key features of Radium are as follows:-
  1. simple inline styles
  2. supports pseudo class like :hover, :focus and :active etc.
  3. Media queries for responsive design
  4. Automatic vendor prefixing like -moz, -webkit, -o and -ms to support experimental or nonstandard CSS properties.
  5. Supports CSS3 Keyframes animation.
  6. ES2015 class and createClass support.
  • In this demo, “We will learn to use Radium with a ReactJS element”.
  • To demonstrate Radium we have created ReactRadiumDemo project.The example1 directory contains the code for this post.The structure of ReactRadiumDemo is as follows:-
  • Radium can be installed using npm install radium –S command.The following screenshot shows the terminal with Radium installation.
  • We have to install some NPM modules like Browserify,Babelify, babel-preset-es2015 and babel-preset-react for this demonstration.
  • We have dev/student-list-component.js file contains the code definition for StudentListComponent.It imports Radium library and wraps the StudentListComponent with Radium wrapper and then exports it.The code content of dev/student-list-component.js are as follows:-
var React = require('react');
var Radium = require('radium');
var studentList = [
{name:"Sandeep", subject:"Physics", roll:4},
{name:"John", subject:"Chemistry", roll:1},
{name:"Smith", subject:"Physics", roll:2},
{name:"Ramesh", subject:"Chemistry", roll:3}
];
var styles = {
header: {
color: '#999',
':hover':{
color:'#00f'
},
':focus':{
color:'#f00'
},
':active':{
color:'#000'
}
}
};
var StudentListComponent = React.createClass({
render: function() {
var results = this.props.results;
return (
<ol>
{studentList.map(function(student) {
return <li key={student.roll}>
<a key={student.roll} style={[styles.header]} href="#">
{student.name}
</a>
</li>;
})}
</ol>
);
}
});
module.exports = Radium(StudentListComponent);
  • The StudentListComponent renders a list of students name as list and styles it using Radium object.The key thing here is the 3 pseudo classes :hover:active and :focus are used to style the student names.
  • The dev/component-renderer.js file has the code to import StudentListComponent and renders it using react-dom module. The code content of dev/component-renderer.js are as follows:-
var React = require('react'),
ReactDOM = require('react-dom'),
StudentListComponent = require('./student-list-component.js');

ReactDOM.render(<StudentListComponent />,
document.getElementById("component-container"));
  • The demo.html file contains the code to renders the StudentListComponent in a browser.The code content of demo.html are as follows:-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Example1</title>
</head>
<body>
<div id="component-container"></div>
<script src="build/bundle.js"></script>
</body>
</html>
  • Now we can generate a bundle file that can be used by demo.html using browserify.To generate bundled code use the following command.
browserify -t [ babelify --presets [ react ] ] dev/component-render.js -o build/bundle.js
  • The output of this demo looks like following screenshot:-
  • The demo code can be downloaded from the following link:-

The post Manage Inline Style using Radium appeared first on Tutorial Savvy.

Originally published on Wordpress

Like what you read? Give Sandeep Kumar Patel a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.