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
- 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
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
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
"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 codesimport {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 optionimport outline from 'react-outline' let styles = { base : { page:{ backgroundColor:"#eee" }} styles = outline(styles,{named:true}) // enable named elementsconst Page = styles.page`div` // create a div elemet with the 'page' styleexport 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:
- 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
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.
- 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