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)
Examples
- Creating and applying a style
- Generate a element from a style
- Combine style attribute
- Logic functions for run-time control of styles
- Setting the options
- Using the options
- Comparisons
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>
*/
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>
*/
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>
*/
<div style={styles.title({error:!!props.error})}>{props.text}</div>
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>
*/
There three mechanisms
setOptions
is used to set the default options of all calls tooutline(...)
withOptions
is to custom the options for a specific instance ofoutline(...)
- Pass an options object as the 2nd parameters to outline
import {setOptions} from 'react-outline'
setOptions({caching:true,named:true})
import {withOptions} from 'react-outline'
const outline = withOptions({caching:true,named:true})
When enable, will case styled per element based on deep equal check
default to:false
use:{caching : true}
(boolean)
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" }} />
*/
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
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" }} />
*/
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:
- 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
- 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
- No vendor prefixes support.
vendor prefixes support is provided by inline-style-prefixer under the covers
- 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
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.
- Fork react-outline
- Create a feature branch (git checkout -b my-new-fature)
- Write tests
- Ensure the code the covered
- Add story to the example storybook
- Commit your changes
- Push to your branch
- Make a pull request