Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
CyaSS React Component - mimic :hover and :active with inline styles
import React from "react/addons";
import m from "./m";
export default class CyaSS extends React.Component {
constructor() {
this.state = {
hover: false,
active: false
_onHover(hover) {
hover: hover,
active: && hover
_onActive(active) {
this.setState({active: active});
_modifyStyle(style) {
style = m(style,
this.state.hover && style.hover, &&;
style.hover = undefined; = undefined;
return style;
_modifyChild(child) {
return React.addons.cloneWithProps(child, {
onMouseOver: this._onHover.bind(this, true),
onMouseOut: this._onHover.bind(this, false),
onMouseDown: this._onActive.bind(this, true),
onMouseUp: this._onActive.bind(this, false),
hover: this.state.hover,
style: this._modifyStyle(
render() {
let child = React.Children.only(this.props.children);
return, child);
import React from "react";
import CyaSS from "./CyaSS";
let linkStyle = {
color: 'blue',
hover: {color: 'green'},
active: {color: 'red'}
<a href="#" style={linkStyle}>Link</a>
), document.body);
import objectAssign from "object-assign";
export default function m() {
var res = {};
for (let i in arguments) {
if (arguments[i]) objectAssign(res, arguments[i]);
return res;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment