react styling framework to keep your makeup clean
npm install react-outlinereact-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)
---
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
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
$3
`JS
import outline from 'react-outline'const styles = outline({
title: { fontSize: "25px" }
});
export default (props) =>
{props.text}
// Renders: "hello"
`$3
`JS
import outline from 'react-outline'const styles = outline({ title: { fontSize: "25px" } });
const Title = styles.title
divexport default (props) =>
{props.text}
// Renders: "hello"
`
$3
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.title
div// Using a prop flag - cleanest!
export default
Something went wrong
// Renders: ...
`Alternative syntaxes:
`JS
// Via style prop
Error // Via style function (inline)
Error
`$3
Add functions to compute styles dynamically at runtime:
`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 (
{data.map((item, i) => (
{item.name}
))}
)
`With generated elements - the
style prop becomes the function argument:`JS
const Group = styles.contentdiv
const Cell = styles.cellspanexport 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
/*
*/
`#### 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
`JS
// 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/*
*/
`$3
#### 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
$3
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.