react-styles-provider
Powerful, dynamic styles for React and React Native.
npm install --save react-styles-providerUsage
1. Passing styles to components
Use the createStyles decorator to provide a styles prop to the component.
import React, { Component } from 'react'
import createStyles from 'react-styles-provider'
@createStyles({
container: {
padding: 20,
backgroundColor: 'whitesmoke',
},
text: {
color: 'black',
},
})
export default class HelloButton extends Component {
render() {
const {styles} = this.props
return (
<div style={styles.container}>
<span style={styles.text}>
Hello World
</span>
</div>
)
}
}2. Compute styles based on props
At any place in the createStyles call, you may use a function, which takes props as a parameter.
Compute a single value from props
@createStyles({
container: {
padding: 20,
backgroundColor: props => props.error ? 'red' : 'whitesmoke',
},
text: {
color: 'black',
},
})Compute a style object from props
@createStyles({
container: props => ({
padding: props.large ? 40 : 20,
backgroundColor: props.error ? 'red' : 'whitesmoke',
}),
text: {
color: 'black',
},
})Compute all style objects from props
@createStyles(props => ({
container: {
padding: props.large ? 40 : 20,
backgroundColor: props.error ? 'red' : 'whitesmoke',
},
text: {
color: props.error ? 'white' : 'black',
},
}))3. Compute styles based on state
The createStyles decorator also adds a getStyles prop to the component. Calling getStyles(state) runs any functions in createStyles with state as the second parameter.
import React, { Component } from 'react'
import createStyles from 'react-styles-provider'
@createStyles({
container: {
padding: 20,
backgroundColor: 'whitesmoke',
},
text: {
color: (props, state) => state.hover ? 'grey' : 'black',
},
})
export default class HelloButton extends Component {
state = {
hover: false,
}
render() {
const {getStyles} = this.props
const styles = getStyles(this.state)
return (
<div
style={styles.container}
onMouseEnter={() => this.setState({hover: true})}
onMouseLeave={() => this.setState({hover: false})}
>
<span style={styles.text}>
Hello World
</span>
</div>
)
}
}4. Style arrays (same behavior as React Native)
@createStyles(props => {
// Extended by both container and text
const base = {
margin: 30,
backgroundColor: props.error ? 'red' : 'whitesmoke',
}
return {
container: [
base,
{padding: props.large ? 40 : 20}
],
text: [
base,
{color: props.error ? 'white' : 'black'}
],
}
})5. Responsive helpers (React web only, for now)
The responsive decorator adds a responsive prop to your component, which can be used both to create style objects and in the render function.
import React, { Component } from 'react'
import { ResponsiveProvider } from 'react-styles-provider'
// Choose how to define the `responsive` prop. In this case, we'll define it as
// a string like, "small-mobile" or "large-desktop". This gets called every time
// window dimensions change.
const calculateResponsiveBreakpoints = ({width, height, isMobile}) => {
const attributes = []
if (width > 1280) {
attributes.push('large')
} else if (width > 800) {
attributes.push('medium')
} else {
attributes.push('small')
}
if (isMobile) {
attributes.push('mobile')
} else {
attributes.push('desktop')
}
return attributes.join('-')
}
// Pass our responsive calculation function to ResponsiveProvider to make the
// `responsive` prop available to descendant components
export default class App extends Component {
render() {
return (
<ResponsiveProvider set={calculateResponsiveBreakpoints}>
<HelloButton />
</ResponsiveProvider>
)
}
}import React, { Component } from 'react'
import { responsive } from 'react-styles-provider'
@responsive()
@createStyles({
container: {
padding: 20,
backgroundColor: 'whitesmoke',
width: props => props.responsive.match('small|mobile') ? 300 : 600,
},
text: {
color: 'black',
},
})
export default class HelloButton extends Component {
render() {
const {style, responsive} = this.props
return (
<div style={styles.container}>
<span style={styles.text}>
Hello World
</span>
{responsive.match('mobile') && (
<span>On Mobile</span>
)}
</div>
)
}
}
