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

Examples

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

Creating and applying a style (Basic example)

import outline from 'react-outline'

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

export default (props) => <div style={styles.title()}>{props.text}</div>
/*
 props === { text:"hello" }
<div style={{ fontSize: "25px" }}>"hello"</div>
*/

The above example can be streamlined using the tag creater

import outline from 'react-outline'

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

const Title = styles.title`div`

export default (props) => <Title>{props.text}</Title>
/*
 props === { text:"hello" }
<div style={{ fontSize: "25px" }}>"hello"</div>
*/

Combine style attribute

You can combine attribute of a style by using a boolean flag

import outline from 'react-outline'

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

const Title = styles.title`div`

export default (props) => <Title style={{error:!!props.error}}>{props.text}</Title>

/*
 props === { text:"hello", error:true }
<div style={{ fontSize: "25px", color:"#f00" }}>"hello"</div>
*/

The attribute flag can be used via the style function

<div style={styles.title({error:!!props.error})}>{props.text}</div>

redux-outline also support custom function. To have run-time control over your styles.

NOTE:
If your funtion have 1 argument, it will be passed only the incoming arguments.
With 2 arguments. The first will be the corresponding style and the second will be the incoming arguments.

import outline from 'react-outline'

let styles = {
    base : {
      content:{
        backgroundColor:"gray"
      }
      cell:{
        fontSize:10
      }
    }    
}

styles.content = (numberOfCells) => { height : `${numberOfCells*100}px` }
styles.cell = (style,important) => { fontSize : style.fontSize + (important)?5:-5 }

styles = outline(styles);

export default () => {

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

return (<div style={styles.content(data.length)}> {
            data.map( cellData => <span styles={styles.cell(cellData.important)}>{cellData.name}</span> )
        } </div>)
}

/*
<div style={{ backgroundColor:"gray", height : "300px" }}>
  <span style={{ fontSize : 15 }}> foo </span>
  <span style={{ fontSize : 5 }}>  bar </span>
  <span style={{ fontSize : 10 }}> cat </span>
</div>
*/

👌 Dont forget! Generated element will have there style prop used as the style function argument.

/*
 Same as above !!
*/

styles = outline(styles);

const Group = styles.content`div`
const Cell = styles.cell`span`

export default () => {

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

return (<Group style={data.length}> {
            data.map( cellData => <Cell styles={cellData.important}>{cellData.name}</Cell> )
        } </Group>)
}

/*
<div style={{ backgroundColor:"gray", height : "300px" }}>
  <span style={{ fontSize : 15 }}> foo </span>
  <span style={{ fontSize : 5 }}>  bar </span>
  <span style={{ fontSize : 10 }}> cat </span>
</div>
*/

Setting the options

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

import {setOptions} from 'react-outline'
        setOptions({caching:true,named:true})

"withOptions" function

import {withOptions} from 'react-outline'
const outline = withOptions({caching:true,named:true})

Using the options

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)

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 <div style={styles.foo}/>
/*
 <div style={{ backgroundColor:"#311B92" }} />
*/

named

Helpful for debugging. Will add a name attribute Dom element if you use a generated element
default to: true
use: {named : true} (boolean)

Using the named option

// Using the named option
import outline from 'react-outline'

let styles = {
 base : {
      page:{
        backgroundColor:"#eee"
      }
}

styles = outline(styles,{named:true}) // enable named elements
const Page = styles.page`div`         // create a div elemet with the 'page' style
export default Page                   // export the elemet

/*
 <div name="page" style={{ backgroundColor:"#eee" }} />
*/

comparisons

styled components

I created react-outline becase of some shortcoming I found when trying to use styled-components in a new project. The problem's I addressed as:

1. Elements where replaced and the new css class name was changed on each render. This was a problem with using animate.css + ReactCSSTransitionGroup -> leaveActive. The element would enter fine but just disappear immediately on leave.

React-outline supports ReactCSSTransitionGroup Example

2. You cant style exiting react of elements, only create new ones.

With React-outline you can create any element you what Example or style an existing one Example

3. No vendor prefixes support.

vendor prefixes support is provided by inline-style-prefixer under the covers

4. The style must be in a CSS string. Then makes moving existing inline style object to CSS is time time consuming

Checkout any of the code here examples

Contributing

Feature requests can be made using Github issues

Pull requests are totally encouraged and you are welcome to contribute to the development of react-outline. Please do raise an issue before making a pull request so as to determine if a particular feature is already being worked on or is currently out of the scope of this project.

1. Fork react-outline
2. Create a feature branch (git checkout -b my-new-fature)
3. Write tests
4. Ensure the code the covered
5. Add story to the example storybook
6. Commit your changes
7. Push to your branch
8. Make a pull request