Manage Inline Style using Radium -Tutorial Savvy

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:-

simple inline styles
supports pseudo class like :hover, :focus and :active etc.
Media queries for responsive design
Automatic vendor prefixing like -moz, -webkit, -o and -ms to support experimental or nonstandard CSS properties.
Supports CSS3 Keyframes animation.
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:-

https://github.com/saan1984/ReactRadiumDemo

Mar 21, 2016Sandeep Patel

Manage Inline Style using Radium

Related

Sandeep Patel