a simple tool to help you using inline-styles with react
$ npm install --save stile
import {
createStyleSheet,
em,
rem,
percent,
deg,
vw,
vh,
resizeable,
ResizeProvider,
} from "stile"
Prefixes and freezes your style declaration.
const styles = createStyleSheet({
title: {
color: "red",
},
})
Adds the em
unit to your value
em(1.5) // "1.5em"
Adds the rem
unit to your value
rem(1.5) // "1.5rem"
Adds the %
unit to your value
percent(1.5) // "1.5%"
Adds the deg
unit to your value
deg(1.5) // "1.5deg"
Adds the vw
unit to your value
vw(1.5) // "1.5vw"
Adds the vh
unit to your value
vh(1.5) // "1.5vh"
Creates a higher-order component giving to your component some props about the viewport. Also makes your component update whenever the window is resized.
Requires ResizeProvider
@resizeable()
class MyComponent {
const { viewport, viewportWidth, viewportHeight } = this.props
}
A component to put at the top of your app, basically managing the resizeable
components. The getViewport
prop lets you return what these components will
receive as viewport
prop. The initialViewport
is passed to getViewport
the first time if defined in order to be able to render on the server.
React.render(
<ResizeProvider
initialViewport={{width: 100, height: 200}}
getViewport={({ width, height }) => width > 100 ? "M" : "S"}>
{/* NOTE: you pass a function as callback */}
{() => <App />}
</ResizeProvider>,
mountNode
)