diff --git a/index.d.ts b/index.d.ts index 154a73a..b7ac92c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -50,7 +50,8 @@ declare module 'react-grid-system' { xl?: boolean fluid?: boolean, style?: object, - component?: () => string | string + component?: () => string | string, + gridColumns?: number, } type RowProps = React.DetailedHTMLProps, HTMLDivElement> & { diff --git a/src/grid/Col/index.jsx b/src/grid/Col/index.jsx index 7907794..77096ee 100644 --- a/src/grid/Col/index.jsx +++ b/src/grid/Col/index.jsx @@ -1,9 +1,9 @@ import React, { createElement } from 'react'; import PropTypes from 'prop-types'; import getStyle from './style'; -import { getConfiguration } from '../../config'; import { GutterWidthContext } from '../Row'; import ScreenClassResolver from '../../context/ScreenClassResolver'; +import { CustomGridColumnsContext } from '../Container'; export default class Col extends React.PureComponent { static propTypes = { @@ -105,7 +105,7 @@ export default class Col extends React.PureComponent { component: 'div', }; - renderCol = (gutterWidth, screenClass) => { + renderCol = (gutterWidth, screenClass, gridColumns) => { const { children, xs, @@ -135,7 +135,7 @@ export default class Col extends React.PureComponent { debug, screenClass, gutterWidth, - gridColumns: getConfiguration().gridColumns, + gridColumns, moreStyle: style, }); return createElement(component, { style: theStyle, ...otherProps, children }); @@ -144,9 +144,13 @@ export default class Col extends React.PureComponent { render = () => ( {screenClass => ( - - {gutterWidth => this.renderCol(gutterWidth, screenClass)} - + + {gridColumns => ( + + {gutterWidth => this.renderCol(gutterWidth, screenClass, gridColumns)} + + )} + )} ); diff --git a/src/grid/Container/index.jsx b/src/grid/Container/index.jsx index b100bf7..8db8ebf 100644 --- a/src/grid/Container/index.jsx +++ b/src/grid/Container/index.jsx @@ -4,6 +4,8 @@ import getStyle, { getAfterStyle } from './style'; import { getConfiguration } from '../../config'; import ScreenClassResolver from '../../context/ScreenClassResolver'; +export const CustomGridColumnsContext = React.createContext(getConfiguration().gridColumns); + export default class Container extends React.PureComponent { static propTypes = { /** @@ -47,6 +49,10 @@ export default class Container extends React.PureComponent { * Use your own component */ component: PropTypes.elementType, + /** + * Use your own gridColumns value for Container + */ + gridColumns: PropTypes.number, }; static defaultProps = { @@ -58,11 +64,12 @@ export default class Container extends React.PureComponent { xl: false, style: {}, component: 'div', + gridColumns: getConfiguration().gridColumns, }; render() { const { - children, fluid, xs, sm, md, lg, xl, style, component, ...otherProps + children, fluid, xs, sm, md, lg, xl, style, component, gridColumns, ...otherProps } = this.props; return ( @@ -85,8 +92,10 @@ export default class Container extends React.PureComponent { ...otherProps, }, - {children} - + + {children} + + , ) } diff --git a/src/grid/Readme.md b/src/grid/Readme.md index e5b0fb2..4845fcf 100644 --- a/src/grid/Readme.md +++ b/src/grid/Readme.md @@ -247,3 +247,24 @@ Resize your browser or load on different devices to test the grid system. ``` + +You can define a custom grid columns value to specific Container + +### Example: Custom grid columns param + +``` + + + 1 of 2 + 2 of 2 + +
+ + 1 of 3 + 2 of 3 + 3 of 3 + +
+``` + +