Responsive Tool
Arwes has some utilities to handle responsive functionalities. You can use the
createResponsive
module and create your tool.
import { createTheme, createResponsive } from 'arwes'; const myTheme = createTheme(); const responsive = createResponsive({ getTheme: () => myTheme }); // To know in what breakpoint the viewport is at: const state = responsive.get(); // `{ medium: true, status: 'medium' }` // if device is on medium breakpoint, for example. // To listen for breakpoint changes: const listener = responsive.on(state => console.log(state)); // To turn it off: responsive.off(listener);
You need to provide the Design System theme for it to know about the breakpoints.
In a component you can use it the same way:
import React from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider, createTheme, withStyles, createResponsive } from 'arwes'; class MyComponentClass extends React.Component { constructor () { super(...arguments); this.responsive = createResponsive({ getTheme: () => this.props.theme }); } render () { const { status } = this.responsive.get(); return <div>Responsive status: {status}</div>; } } const MyComponent = withStyles()(MyComponentClass); const App = () => ( <ThemeProvider theme={createTheme()}> <MyComponent /> </ThemeProvider> ); ReactDOM.render(<App />, document.querySelector('#root'));
So the component can render Responsive status: large
when viewport is in
breakpoint large when it is mounted.