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.

github DefinitelyTyped / DefinitelyTyped / reactcss / reactcss-tests.tsx View on Github external
// 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")
)
github DefinitelyTyped / DefinitelyTyped / reactcss / reactcss-tests.tsx View on Github external
// 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")
)
github casesandberg / react-color / src / components / SliderPicker.js View on Github external
'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)
github casesandberg / react-color / src / components / MaterialPicker.js View on Github external
'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)
github casesandberg / react-bounds / modules / react-material-design / src / components / Raised.jsx View on Github external
/* 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',
github casesandberg / react-color / src / components / CompactPicker.js View on Github external
'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)
github nictuku / stardew-rocks / web / client / src / components / App.js View on Github external
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);
github casesandberg / reactcss / examples / Dialog.es5.jsx View on Github external
'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',
github casesandberg / reactcss / examples / Button.es5.jsx View on Github external
'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',
github DefinitelyTyped / DefinitelyTyped / reactcss / reactcss-tests.tsx View on Github external
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")
)

reactcss

Bringing Classes to Inline Styles

MIT
Latest version published 7 years ago

Package Health Score

70 / 100
Full package analysis