styles-merge/README.md

A JavaScript utility for merging style objects together

# Stylesmerge · [![npm](https://img.shields.io/npm/v/styles-merge.svg)](https://www.npmjs.com/package/styles-merge) [![Build Status](https://travis-ci.org/srishanbhattarai/styles-merge.svg?branch=master)](https://travis-ci.org/srishanbhattarai/styles-merge) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

A declarative JavaScript utility to merge style objects together - developed primarily for React Native styles.

## Installation

Install with `npm`:

```bash
npm install styles-merge --save
```

Or, if you prefer `yarn`:

```bash
yarn add styles-merge
```

After installation, you can import the function as follows:

```js
import stylesmerge from 'styles-merge'
```

## Usage

The `stylesmerge` function can be used in two primary ways, conditionally and non-conditionally. In either case, you get the
final 'merged' object by calling `.eval()`

Conditional usages leverage `.ifThen()` and `.ifThenElse()`:

```js
import stylesmerge from 'styles-merge'


const styles = stylesmerge()
  .ifThen(noOfObjects < 10, { flexDirection: 'row' })
  .ifThenElse(isDiscountSeason, { backgroundColor: 'red' }, { backgroundColor: 'green' })
  .eval()
```

Pass an initial set of arguments to `stylesmerge()` for non-conditional usage.

```js
import stylesmerge from 'styles-merge'


const styles = stylesmerge(styles.containerStyle, styles.fontStyle)
```

Furthermore, you can mix and match both the conditional and non-conditional patterns.

## React Native Usage

Here's a moderately "real world" dumb component that utilizes this library:

```js
import React from 'react'
import PropTypes from 'prop-types'
import { View } from 'react-native'
import stylesmerge from 'styles-merge'

/**
 * Container is a generic element to wrap children
 * in a flex View.
 *
 * @returns {jsx}
 */
const Container = ({ children, centerChildren, flex, style, ...props }) => {
  const styles = stylesmerge({ flex })
    .ifThen(style !== undefined, style)
    .ifThen(centerChildren === true, { alignItems: 'center', justifyContent: 'center' })
    .eval()

  return <View style={styles}>{children}</View>
}

Container.propTypes = {
  children: PropTypes.element.isRequired,
  centerChildren: PropTypes.bool,
  style: View.propTypes.style,
  flex: PropTypes.number
}

Container.defaultProps = {
  flex: 1,
  centerChildren: false
}

export default Container
```

## License

MIT