How to use reactcss - 10 common examples
To help you get started, we’ve selected a few reactcss examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / reactcss / reactcss-tests.tsx View on Github 
// ReactCSS Test
// ================================================================================
///
///
///
// Imports
// --------------------------------------------------------------------------------
import * as React from "react"
import { StatelessComponent } from "react"
import { render } from "react-dom"
import { default as reactCSS, hover, loop } from "reactcss"
interface TestProps extends ReactCSS.HoverProps {}
var styles: any = reactCSS({
default : {},
hover : {}
}, { hover : true })
var loopProps: ReactCSS.LoopableProps = loop(1, 10)
var TestComponent: StatelessComponent
var Test = hover(TestComponent)
render(
,
document.getElementById("main")
)// Imports
// --------------------------------------------------------------------------------
import * as React from "react"
import { StatelessComponent } from "react"
import { render } from "react-dom"
import { default as reactCSS, hover, loop } from "reactcss"
interface TestProps extends ReactCSS.HoverProps {}
var styles: any = reactCSS({
default : {},
hover : {}
}, { hover : true })
var loopProps: ReactCSS.LoopableProps = loop(1, 10)
var TestComponent: StatelessComponent
var Test = hover(TestComponent)
render(
,
document.getElementById("main")
)'use strict' /* @flow */
import React from 'react'
import ReactCSS from 'reactcss'
import merge from 'merge'
import isPlainObject from 'lodash.isplainobject'
import debounce from 'lodash.debounce'
import color from '../helpers/color'
import Slider from './slider/Slider'
class ColorPicker extends ReactCSS.Component {
constructor(props: any) {
super()
this.state = merge(color.toState(props.color, 0), {
visible: props.display,
})
this.debounce = debounce(function(fn: any, data: any) {
fn(data)
}, 100)
this.handleChange = this.handleChange.bind(this)
this.handleHide = this.handleHide.bind(this)
this.handleAccept = this.handleAccept.bind(this)
this.handleCancel = this.handleCancel.bind(this)'use strict' /* @flow */
import React from 'react'
import ReactCSS from 'reactcss'
import merge from 'merge'
import isPlainObject from 'lodash.isplainobject'
import debounce from 'lodash.debounce'
import color from '../helpers/color'
import Material from './material/Material'
class ColorPicker extends ReactCSS.Component {
constructor(props: any) {
super()
this.state = merge(color.toState(props.color, 0), {
visible: props.display,
})
this.debounce = debounce(function(fn: any, data: any) {
fn(data)
}, 100)
this.handleChange = this.handleChange.bind(this)
this.handleHide = this.handleHide.bind(this)
this.handleAccept = this.handleAccept.bind(this)
this.handleCancel = this.handleCancel.bind(this)/* jshint node: true, esnext: true */
"use strict";
var React = require('react');
var ReactCSS = require('reactcss');
class Raised extends ReactCSS.Component {
classes() {
return {
'default': {
wrap: {
position: 'relative',
width: '100%',
height: '100%',
},
content: {
position: 'relative',
width: '100%',
height: '100%',
},
bg: {
Absolute: '0 0 0 0','use strict' /* @flow */
import React from 'react'
import ReactCSS from 'reactcss'
import merge from 'merge'
import isPlainObject from 'lodash.isplainobject'
import debounce from 'lodash.debounce'
import color from '../helpers/color'
import Compact from './compact/Compact'
class ColorPicker extends ReactCSS.Component {
constructor(props: any) {
super()
this.state = merge(color.toState(props.color, 0), {
visible: props.display,
})
this.debounce = debounce(function(fn: any, data: any) {
fn(data)
}, 100)
this.handleChange = this.handleChange.bind(this)
this.handleHide = this.handleHide.bind(this)
this.handleAccept = this.handleAccept.bind(this)
this.handleCancel = this.handleCancel.bind(this)import React from 'react';
import ReactCSS from 'reactcss';
import {connect} from 'react-redux';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
import * as drawerActions from "../actions/drawerActions";
import Navbar from './Navbar';
import Drawer from './Drawer';
import theme from '../theme';
class App extends ReactCSS.Component {
constructor (props) {
super(props);
}
getChildContext () {
return {
muiTheme: getMuiTheme(theme)
};
}
componentWillMount () {
// this.props.drawer.mql.addListener(this.props.updateAutoDock);
}
componentWillUnmount () {
// this.props.drawer.mql.removeListener(this.props.updateAutoDock);'use strict';
var React = require('react');
var ReactCSS = require('reactcss');
var Button = require('./Button.es5');
module.exports = React.createClass({
// Include the ReactCSS.mixin as a mixin
mixins: [ReactCSS.mixin],
classes: function() {
return {
// This is our default dialog class
'default': {
dialog: {
background: '#fff',
boxShadow: '0 6px 20px rgba(0,0,0,.19), 0 8px 17px rgba(0,0,0,.2)',
borderRadius: '2px',
maxWidth: '400px',
},
body: {
padding: '24px',
},
title: {
fontSize: '20px','use strict';
var React = require('react');
var ReactCSS = require('reactcss');
module.exports = React.createClass({
// Include the ReactCSS.mixin as a mixin
mixins: [ReactCSS.mixin],
getDefaultProps: function() {
return {
// Set a fallback backgound and color if one isnt specified
background: '#4A90E2',
color: 'rgba(255,255,255,.87)',
};
},
classes: function() {
return {
// This is our default button class
'default': {
button: {
background: this.props.background,
display: 'inline-block',import * as React from "react"
import { StatelessComponent } from "react"
import { render } from "react-dom"
import { default as reactCSS, hover, loop } from "reactcss"
interface TestProps extends ReactCSS.HoverProps {}
var styles: any = reactCSS({
default : {},
hover : {}
}, { hover : true })
var loopProps: ReactCSS.LoopableProps = loop(1, 10)
var TestComponent: StatelessComponent
var Test = hover(TestComponent)
render(
,
document.getElementById("main")
)
