Rockey React

CSS in JS. Rockey

npm i --save rockey-react

Api

• Flexible Rockey Higher Order Component
• Shortcuts
• Dynamic CSS — props
• Dynamic CSS — Event Handlers
• Looks
• Recompose shortcut
• Examples

Flexible Rockey Higher Order Component

import rockey from 'rocket-react';

const Component = rockey(BaseComponent)`
  color: green;
`;

Now Component could be used as React component:

<Component/>

Or extend it and create anonymous child component with additional styles:

const Child = Component`
  text-decoration: underline;
`;

By default rockey-react try to use BaseComponent.displayName to generate classname. But sometimes it is more useful to set name manually.

const Child = Component('MySuperChild')`
  text-decoration: underline;
`;

Shortcuts

Available all valid html tags. Create anonymus component from shortcuts:

import rockey from 'rockey-react';

const Block = rockey.div`
  padding: 5px;
  border: 1px solid #000;
`;

Create named component from shortcuts:

import rockey from 'rockey-react';

const Block = rockey.div('Block')`
  padding: 5px;
  border: 1px solid #000;
`;

Dynamic CSS — props

import when from 'rockey/when';

Write CSS that depends on components props. Same as rockey.when

Demo: Buttons look with mixins

const Button = rockey.div`
   color: black;
   ${when('isPrimary', props => props.primary)`
     color: green;
   `}

   font-size: ${props => `${0.9 * props.scale}em`};
`;

Dynamic CSS — Event Handlers

import handler from 'rockey-react/handler';

Write CSS mixins that are triggered along with events handlers.

Demos:

• Input styles for specific value
• Div background depends on mouse X and Y

import rockey from 'rockey-react';

const Input = rockey.input`
  font-size: 25px;
  border: none;
  border-bottom: 2px solid #000;
  padding: 0 0 5px 0;
  outline: none;
  font-family: monospace;
  ${rockey.handler('onChange', e => e.target.value === 'rockey')`
    color: green;
  `}
`;

Looks

Split component into different looks.

Demos:

• Buttons look
• Card and PrimaryCard look

Most component features could be implemented as component’s prop or as Higher Order Component.

<Button primary={true}>I am m Button</Button>
<PrimaryButton>I am PrimaryButton</PrimaryButton>

There is the approach that helps to make more correct decision what approach use

| Button | raised | disabled | success | warning | primary | ripple | | ---------|--------|-----------|---------|---------|---------|--------|
| raised | - | ✅ | ✅ | ✅ | ✅ | ✅ | | disabled | ✅ | - | ✅ | ✅ | ✅ | ✅ | | success | ✅ | ✅ | - | ❌ | ❌ | ✅ | | warning | ✅ | ✅ | ❌ | - | ❌ | ✅ | | primary | ✅ | ✅ | ❌ | ❌ | - | ✅ | | ripple | ✅ | ✅ | ✅ | ✅ | ✅ | - |

• ripple - could be used in any state. So it should be used as prop.
• disabled - could be used in any state. So it should be used as prop.
• success - could NOT* be used along with warning and primary. So it should be implemented as Higher Order Component.
• and so on.

If there is no ❌ — feature should be implemented as props. If there is a least one ❌ — feature should be implemented as Higher Order Component.

And rockey look feature helps with this.

import look from 'rockey-react/look';

const { Button, PrimaryButton, SuccessButton } = look.button`
  Button {
    padding: 5px;
    background: none;
  }

  PrimaryButton {
    color: blue;
  }

  SuccessButton {
    color: green;
  }
`;

This is the same as:

import rockey from 'rockey-react';

const Button = rockey.button`
  padding: 5px;
  background: none;
`;

const PrimryButton = Button('PrimryButton')`
  color: blue;
`;

const SuccessButton = Button('SuccessButton')`
  color: green;
`;

Demos:

NOTE: difference only in generated CSS class names

• Named Extending: raised Button / PrimaryButton / SuccessButton
• Anonymous Extending: raised Button / PrimaryButton / SuccessButton

or:

import rockey from 'rockey-react';

const Button = rockey.button`
  padding: 5px;
  background: none;
`;

const { PrimaryButton, SuccessButton } = Button.look`
  PrimaryButton {
    color: blue;
  }

  SuccessButton {
    color: green;
  }
`;

<PrimaryButton />
// or
<Button.PrimaryButton />

Recompose shortcut

import recompose from 'rockey-react/recompose';

Currently we use recompose in each React application. Recompose helps to write less code and share features between components. This shortcut helps to save time and code when using rockey + recompose.  Great thanks to Andrew Clark for recompose!

import rockempose from 'rockey-react/recompose';
import withProps from 'recompose/withProps';

const Line = rockempose.span(
  withProps(props => ({
    long: props.value && props.value.length > 140
  }))
)`
  font-size: 15px;

  ${when(props => props.long)`
    font-size: 10px;
  `}
`;

Examples

• Card example
• Warning Card example
• Buttons look with mixins
• Buttons example
• Button / PrimaryButton / SuccessButton with raised mixin
• Buttons look
• Anonymous Extending: raised Button / PrimaryButton / SuccessButton
• Anonymous Buttons example
• Material TextField
• Primary and Raised Blocks
• Input styles for specific value
• Div background depends on mouse X and Y
• Animated divs
• Themed Buttons

Feedback wanted

This is a very new approach and library and not all features are implemented yet. Feel free to file issue or suggest feature to help me to make rockey better. Or ping me on twitter @tuchk4.

🎉

Upcoming plans:

• Make disadvantages list as shorter as possible
• Medium post "Rockey Under the Hood". Topic about how rockey works — how to make batch CSS rules insert, how to parse and auto optimize parser, how dynamic CSS works
• Medium post "Rockey — tips and tricks". There are too lot of tips and tricks that I want to share with you
• "Components kit" — library with easiest way to develop React components using rockey and recompose