Minimal set of helpers for Aphrodite to improve composability
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
index.js
package.json
rollup.js
yarn.lock

README.md

aphrodite-helpers

npm version Build Status Coverage Status

Minimal set of helper methods for Aphrodite to improve reusability of React components with Aphrodite-based styling.

Install

NPM:

npm install aphrodite-helpers

Yarn:

yarn add aphrodite-helpers

Methods

Two helper methods are provided:

  • getStyleSheet(key, styleSheetA, styleSheetB)

Given a certain key (string) and one or two stylesheet objects, getStyleSheet returns a new StyleSheet object with a single property key and its value being the result from merging styleSheetA[key] and styleSheetB[key]. This object is typically passed as prop to a child component.

Example

const styleSheetA = StyleSheet.create({ title: { color: blue }, ... }):
const styleSheetB = StyleSheet.create({ title: { paddingTop: '20px' }, ... }):
const titleStyleSheet = getStyleSheet('title', styleSheetA, styleSheetB);
// => evaluates to StyleSheet.create({ title: { color: blue, paddingTop: '20px' } });
  • getStyle(key, styleSheetA, styleSheetB)

Given a certain key (string) and one or two stylesheet objects, getStyle returns a new Style object resulting from merging styleSheetA[key] and styleSheetB[key]. This object is typically passed as argument to Aphrodite's css function.

Example

const styleSheetA = StyleSheet.create({ title: { color: blue }, ... }):
const styleSheetB = StyleSheet.create({ title: { paddingTop: '20px' }, ... }):
const titleStyle = getStyle('title', styleSheetA, styleSheetB);
...
<h1 className={css(titleStyle)}>Hello</h1>
...

Example

Title.js

import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, css } from 'aphrodite';
import { getStyle } from 'aphrodite-helpers';

const styles = StyleSheet.create({
  title: {
    fontSize: '20pt'
  }
});

const Title = ({ title, styleSheet }) => {
  const mergedStyles = getStyle('title', styles, styleSheet);
  return (<h1 className={css(mergedStyles)}>{title}</h1>);
};

Title.propTypes = {
  title: PropTypes.string.isRequired,
  styleSheet: PropTypes.shape({
    title: PropTypes.obj
  })
}

export default Title;

Header.js

import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, css } from 'aphrodite';
import { getStyleSheet, getStyle } from 'aphrodite-helpers';
import Title from './Title';

const styles = StyleSheet.create({
  header: {
    backgroundColor: 'black'
  }
  title: {
    color: 'white'
  }
});

const Header = ({ styleSheet }) => {
  const titleStyleSheet = getStyleSheet('title', styles, styleSheet);
  const headerStyle = getStyle('header', styles, styleSheet);
  return (<div className={css(headerStyle)}>
      <Title title="Hello World" stylesheet={titleStyleSheet} />
    </div>);
};

Header.propTypes = {
  styleSheet: PropTypes.shape({
    header: PropTypes.obj
    title: PropTypes.obj
  })
}

export default Header;

In the above example, titleStyleSheet will evaluate to a new Stylesheet with key title and definitions: { fontSize: 20pt, color: 'white' }.