Whys react

Practical usage of react at Whys.

Styles

Style components

Import them from own file:

import Box from 'whys-react/ui/Box';
import Block from 'whys-react/ui/Block';
import Flex from 'whys-react/ui/Flex';
import FlexRow from 'whys-react/ui/FlexRow';
import FlexColumn from 'whys-react/ui/FlexColumn';
import Inline from 'whys-react/ui/Inline';
import InlineBlock from 'whys-react/ui/InlineBlock';
import InlineFlex from 'whys-react/ui/InlineFlex';

Or import as named from index:

import {
  Box,
  Block,
  Flex,
  FlexRow,
  FlexColumn,
  Inline,
  InlineBlock,
  InlineFlex,
} from 'whys-react/ui';

renderStylesheet(stylesheet)

A helper for rendering CSS rules and attaching them to the document. Classes in DOM have generated names, but are readable by developer.

Its useful only for static styles. Its an alternative to style-loader with webpack.

stylesheet is a mapping of class names to objects with react inline style properties.

import { renderStylesheet } from 'whys-react/styles';

const resetButton = {
  outline: 0,
  border: 0,
};

const localCSS = renderStylesheet({
  PrimaryButton: Object.assign({}, resetButton, {
    backgroundColor: 'hotpink',
    fontSize: 16,
  }),
  DefaultButton: Object.assign({}, resetButton, {
    backgroundColor: 'pink',
    fontSize: 16,
  }),
  ProceedLabel: {
    fontSize: 18,
    fontWeight: 600,
  },
});

function UserActions() {
  return (
    <div>
      <div className={localCSS.ProceedLabel}>Proceed:</div>
      <button className={localCSS.PrimaryButton}>Continue</button>
      <button className={localCSS.DefaultButton}>Back</button>
    </div>
  );
}

cx

This is just a conventional export of classnames library.

Its a helper for declarative assigning of classNames.

For usage see: https://github.com/JedWatson/classnames#usage