///
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];