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

Quick Start

The simplest way to create styled components:

import outline from 'react-outline'

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

const Title = styles.title`div`

export default <Title>Hello World</Title>
// Renders: <div style={{ fontSize: 25, backgroundColor: "red" }}>Hello World</div>

Creating and applying a style (Basic example)

import outline from 'react-outline'

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

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

Generate a styled element (Tag Creator)

import outline from 'react-outline'

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

const Title = styles.title`div`

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

Combine style variants

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

import outline from 'react-outline'

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

const Title = styles.title`div`

// Using a prop flag - cleanest!
export default <Title error>Something went wrong</Title>
// Renders: <div style={{ fontSize: "25px", color: "#f00" }}>...</div>

Alternative syntaxes:

// Via style prop
<Title style={{error: true}}>Error</Title>

// Via style function (inline)
<div style={styles.title({error: true})}>Error</div>

Style Functions (Runtime Control)

Add functions to compute styles dynamically at runtime:

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 (
  <div style={styles.content(data.length)}>
    {data.map((item, i) => (
      <span key={i} style={styles.cell(item.important)}>{item.name}</span>
    ))}
  </div>
)

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

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

export default (
  <Group style={data.length}>
    {data.map((item, i) => (
      <Cell key={i} style={item.important}>{item.name}</Cell>
    ))}
  </Group>
)

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-feature)
3. Write tests
4. Ensure the code is covered
5. Add story to the example storybook
6. Commit your changes
7. Push to your branch
8. Make a pull request

Testing Process

The project requires 100% code coverage before publishing to npm.

• New features must include a Storybook example. These examples automatically become tests.
• Edge cases are validated in cornerCases.test.js to ensure comprehensive coverage.
• Run npm run test:cover to check coverage before submitting a PR.