/// import * as React from "react"; import * as ReactDOMServer from "react-dom/server"; import { Grid, Cell, findMatch, setBreakpoints, findBreakpoints, getCurrentBreakpoints, optimizedResize, palm, lap, portable, desk } from "react-flexr"; class Example extends React.Component { render() { return ( 1/3 1/3 1/3 ); } } class Example2 extends React.Component { render() { return ( Fills Half Fills Rest.. (Yay for Flexbox) Fills 150px on lap and 200px everywhere else Fills a quarter on lap and half everywhere else Fills a quarter Fills a quarter on palm (mobile), half on lap and dynamicly sized everywhere else Hidden on palm, half width otherwise ); } } class App1 extends React.Component { render() { const isPalm = findMatch("palm"); if (isPalm) console.log( "only logged in palm" ); return (

Only visible in palm:

{ isPalm ?

Palm

: null }

Allows Multiple Matches

{ findMatch("desk", "lap") ?

Lap or Desk

: null }

); } } const isMobile = /iP(hone|od)|Mobile/; function textFxn(req: any, res: any): void { if ( isMobile.test( req.headers["user-agent"] ) ) { setBreakpoints(["palm", "portable"]) } else { setBreakpoints(["desk"]) } const html = ReactDOMServer.renderToString( ); res.send( "" + html ); } const breakpoints: string[] | boolean = findBreakpoints(); class App2 extends React.Component { componentDidMount() { optimizedResize.init( () => { if ( findBreakpoints() ) { console.log("New Breakpoints"); this.forceUpdate(); } }); } } const breakpoints2: string[] = getCurrentBreakpoints(); const someStrings: string[] = [palm, lap, portable, desk];