Small and very simple React grid system based on simple-scss-layout-grid package
npm install light-react-gridThis library package includes:
- useBreakpoint hook
- GridSystemContext Context
- GridSystem Component with GridHelper component
- Grid Component
- Column Component
#### Configuration:
If we aren't using default settings we can define breakpoints however we like.
We need to define breakpoints, prefixes, gridHelperMargins. gridHelperColumnColor
- breakpoints is used for declaring names, number of columns, gutterSize and minimum/maximum width of breakpoint
- prefixes are used for naming CSS classes that are going to be generated
- gridHelperColumnColor will set the column color of GridHelper. By default, it's set to rgba(0, 0, 0, .1)
- gridHelperMargins should be only set if you are using some container in your project, for example:
``html`
Hello
...
...
In that case we need to use gridHelperMargins to match our Grid.
If you need more control over GridHelper, you could import component and override CSS styles.
Here is the sample configuration:
`tsx`
const GRID_SETTINGS: GridSettings = {
breakpoints: {
sm: {
columns: 4,
gutterSize: 5,
maxWidth: 600,
},
md: {
columns: 8,
gutterSize: 10,
minWidth: 600,
maxWidth: 900,
},
lg: {
columns: 12,
gutterSize: 20,
minWidth: 900,
}
},
prefixes: {
grid: 'g',
gridColumn: 'gc',
},
gridHelperColumnColor: 'rgba(0, 0, 0, .05)'
}
Now we can use it in and define that we want to use Grid Helper:`tsx
// Import CSS for GridHelper component
import 'light-react-grid/dist/index.css'
ReactDOM.render(
useGridHelper={true}
>
document.getElementById('root')
);
`
Please be aware that we are going to use that breakpoint name for size property in component.
To set column size we need to write __exact__ column names as they are defined in myGridSettings: .
Please checkout example code for more details: example/src.
---
#### Usage
We can set column size and left or right offset.\
To define column size we need to pass size for a breakpoint that we want to use, if we don't define column size for the breakpoints it will automatically set width to 100%.`tsx`
...useBreakpoint
In case that we don't need column for some reason in a large breakpoint we can use hook to remove it:`tsx`
const breakpoint = useBreakpoint();
return ();
{ breakpoint === 'md' &&
---
#### Tips
When you define your breakpoints you can always create a wrapper around component
and define breakpoints as props.
`tsx
interface ColumnWrappperProps {
className?: string;
sm?: number;
md?: number;
lg?: number;
offsetLeft?: {
sm?: number;
md?: number;
lg?: number;
};
offsetRight?: {
sm?: number;
md?: number;
lg?: number;
};
}
export const ColumnWrapper: FunctionComponent
children,
className = '',
sm,
md,
lg,
offsetLeft = {},
offsetRight = {},
}) => (
offsetLeft={offsetLeft}
offsetRight={offsetRight}
className={className}
>
{children}
);
``
Usage:tsx``
I wish u happy coding!
----
Light React grid is MIT licensed.