# debonair

> A functional way to work with inline styles

Latest version **0.0.13** (published 2015-03-29) · 0 weekly downloads

## Install

```sh
npm install debonair
pnpm add debonair
yarn add debonair
bun add debonair
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2015-03-29 |
| First published | 2015-03-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | broch.stilley |
| Keywords | inline styles, react, FP, functional programming, styles, react-native |

## Links

- npm: https://www.npmjs.com/package/debonair
- Homepage: https://github.com/brochington/debonair
- Issues: https://github.com/brochington/debonair/issues
- npm.io page: https://npm.io/package/debonair

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^3.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.13 (latest) — 2015-03-29
- 0.0.12 — 2015-03-26
- 0.0.11 — 2015-03-25
- 0.0.10 — 2015-03-23
- 0.0.9 — 2015-03-22
- 0.0.8 — 2015-03-20
- 0.0.7 — 2015-03-19
- 0.0.6 — 2015-03-19
- 0.0.5 — 2015-03-18
- 0.0.4 — 2015-03-18
- 0.0.3 — 2015-03-18
- 0.0.2 — 2015-03-18
- 0.0.1 — 2015-03-18

## README

# Debonair

`npm install debonair`

Homepage: [http://brochington.github.io/debonair](http://brochington.github.io/debonair)

Debonair is a library created to assist in the creation, organization, and editing of styles within the context of React (and hopefully React-Native). It brings many priciples and concepts of a functional programming paradigm into the way we interact with styles.

- [Quick Start](docs/quickstart.md)
- [API](docs/api.md)

## Features

- Use Composition to create Styles!
- Simplifies thought process when contructing styles.
- Enables strong code reuse patterns.
- Loves ES6 conventions.

## Example
```
import { Styler } from "debonair";

/* 
create an instance of a styler, which is just a functor that will return a react style prop compatible object.
*/

let standardBox = Styler.create({
    height: 100,
    width: 100
});

let fancyBorder = styler.create({
    border: "dashed blue 3px"
});

let fancyBox = standardBox(fancyBorder);
/*
{
    height: 100,
    width: 100,
    border: "dashed blue 3px"
}
*/

let bigFancyBox = standardBox(
    standardBox.map(val => val + 200),
    fancyBorder,
    {backgroundColor: "orange"}
);
/*
{
    height: 300,
    width: 300,
    border: "dashed blue 3px",
    backgroundColor: "orange"
}
*/
```
## Installation

`npm install debonair`

In ES6: 
```
import { Debonair, Styler } from "debonair";
```
Require: 
```
var Styler = require("debonair").Styler;
```

## Build
Debonair uses [Webpack](http://webpack.github.io/) to build the library. 

Make sure you have webpack installed
```
$ npm install webpack -g
```

Build bundle
```
$ webpack
```

for Production (uglified):
```
$ webpack -p
```

## Tests:

```
$ karma start
```

---
_Source: https://npm.io/package/debonair · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._