React Configurable Grid
A simple configurable grid for react inspired on grid-styled and react-bootstrap API, but, with open settings.
1.08 kB only
Usage
React Configurable Grid is as simple as using bootstrap grid-system, where you have rows, cols and container classes to wrap components and align as you please, removing alignment and size adustment from their responsability.
Install
npm install react-configurable-grid --save
Basics
;; { return <section> <h1>My component</h1> <Row> <Col xs=6 md=3 lg=2>content 1</Col> <Col xs=6 md=9 lg=10>content 2</Col> <Row> </section> ;} ;
Custom configuration
To use custom breakpoints or custom gutter, just execute configureGrid with config params before your App is mounted;
;;; ; { return <section> <h1>My component</h1> <Row> <Col lg=2>content 1</Col> <Col lg=10>content 2</Col> <Row> <OtherComponent /> </section> ;} ;
Server-Side Rendering
With express server
// server.js...;;;... /* first param - Configuration object second param - If true returns <style type="text/css" data-grid>grid css</style> tag, else, returns grid css only*/const gridStyles = ; { const componentString = ; const generatedHTML = ` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="root"></div> </body> </html> `; res;}
With NextJS
// pages/_document.js...;;;... /* You can pass no arguments if you what to use default config, and return only css code*/const gridStyles = ; static { const html head errorHtml chunks = ; const styles = ; return html head errorHtml chunks styles ; } { return <html lang="pt-BR"> <Head> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> /* You need to add data-grid data attribute when using only css code */ <style type="text/css" data-grid>gridStyles</style> </Head> <body> <Main /> <NextScript /> </body> </html> ; }
API Reference
Row
prop | description | default |
---|---|---|
className | className | - |
component | changes base element | div |
wrap | flex-wrap | wrap |
align | align-items | stretch |
justify | justify-content | flex-start |
Col
prop | description |
---|---|
className | className |
component | changes base element |
xs | extra small cols |
sm | small cols |
md | medium cols |
lg | large cols |
xl | extra large cols |
Configure grid
Changes default values. Also returns styles for server-side rendering
Media queries with null
value will not be rendered
Configuration Object param:
config object attribute | default |
---|---|
xs | 0px or more |
sm | 576px or more |
md | 768px or more |
lg | 992px or more |
xl | 1200px or more |
gutter | 30px |
Return Tag param:
true - returns
<style type="text/css" data-grid>grid css string</style>
false - returns
grid css string
Signature
configureGrid([Object], [Bool]);