!react-outline logo

React-outline is a utility of managing your inline style.

react-outline was designed to more easly manage inline styles and better support server side rendering with complete styling.


Feathers:
* Cleaner JSX markup (without the styles)
* Easy creation of standered and custom element combining styles into the element
* Easer debugging of element with injected name attributes
* Support a UI Color Palette
* Dynamically add vendor prefixes
* Cache calculated style
* Named elements (Generate element mapped to name prop in DOM)

Live Demo / Demo Source

---

Where to start?

1. Creating and applying a style
2. Generate a element from a style
3. Combine style attribute
1. In a generated element
2. using the style function
4. Logic functions for run-time control of styles
5. Setting the options
1. setOptions
2. withOptions
6. Using the options
1. caching
2. colors
3. named
7. Comparisons
1. styled-components

$3

The simplest way to create styled components:

``JS
import outline from 'react-outline'

// Inline style schema - no nesting required!
const styles = outline({
title: { fontSize: 25, backgroundColor: "red" }
});

const Title = styles.titlediv

export default
// Renders:

`JS
import outline from 'react-outline'

const styles = outline({ title: { fontSize: "25px" } });

const Title = styles.titlediv

export default (props) =>
// Renders:

Use base for default styles and add variants as sibling keys:

`JS
import outline from 'react-outline'

const styles = outline({
title: {
base: { fontSize: "25px" },
error: { color: "#f00" }
}
});

const Title = styles.titlediv

// Using a prop flag - cleanest!
export default
// Renders:

Alternative syntaxes:
`JS
// Via style prop


// Via style function (inline)


`JS
import outline from 'react-outline'

const styles = outline({
content: { backgroundColor: "gray" },
cell: { fontSize: 10 }
}, {
// 1 arg: receives the passed value
content: (count) => ({ height: ${count * 50}px }),

// 2 args: receives (baseStyle, passedValue)
cell: (style, important) => ({
fontSize: style.fontSize + (important ? 5 : -5)
})
});

const data = [
{ name: "foo", important: true },
{ name: "bar", important: false },
{ name: "baz" }
]

export default (


With generated elements - the style prop becomes the function argument:

`JS
const Group = styles.contentdiv
const Cell = styles.cellspan

export default (

{data.map((item, i) => (
{item.name}
))}

)
`


$3

There three mechanisms

1. setOptions is used to set the default options of all calls to outline(...)
2. withOptions is to custom the options for a specific instance of outline(...)
3. Pass an options object as the 2nd parameters to outline

#### "setOptions" function
`JS
import {setOptions} from 'react-outline'
setOptions({caching:true,named:true})
`

#### "withOptions" function
`JS
import {withOptions} from 'react-outline'
const outline = withOptions({caching:true,named:true})
`

$3

#### caching

> When enable, will case styled per element based on deep equal check
> default to: false
> use: {caching : true} (boolean)

#### colors
> When enable, will case styled per element based on deep equal check
> default to: undefined
> use: {colors : { red500:#F44336, indigo500:#3F51B5 }} (object)

`JS
import {withOptions} from 'react-outline'

// Using material-ui colors codes
import {colors} from 'material-ui/styles';

const outline = withOptions({colors})

let styles = {
base : {
foo:{
color:"deepPurple900"
}
}
}
styles = outline(styles)
export default