react-styles-provider
Powerful, dynamic styles for React and React Native.
npm install --save react-styles-provider
Usage
1. Passing styles to components
Use the createStyles
decorator to provide a styles
prop to the component.
@ { const styles = thisprops return <div style=stylescontainer> <span style=stylestext> 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
@
Compute a style object from props
@
Compute all style objects from props
@
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.
@ state = hover: false { const getStyles = thisprops const styles = return <div style=stylescontainer onMouseEnter= this onMouseLeave= this > <span style=stylestext> Hello World </span> </div> }
4. Style arrays (same behavior as React Native)
@
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.
// 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 = { const attributes = if width > 1280 attributes else if width > 800 attributes else attributes if isMobile attributes else attributes return attributes} // Pass our responsive calculation function to ResponsiveProvider to make the// `responsive` prop available to descendant components { return <ResponsiveProvider set=calculateResponsiveBreakpoints> <HelloButton /> </ResponsiveProvider> }
@@ { const style responsive = thisprops return <div style=stylescontainer> <span style=stylestext> Hello World </span> responsive && <span>On Mobile</span> </div> }