Rockey-react NPM

Rockey React

npm i --save rockey-react

Rockey tests rockey-react gzip size

Api

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:

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:

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

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

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