masua
v0.11.7
Published
Simple masonry layout library in TypeScript.
Downloads
61
Maintainers
Readme
masua
Simple masonry layout library in TypeScript. Initially forked from minimasonry by Spope.
- ❗ Check out the interactive demo and documentation
- ⚛️ TypeScript and React support
Installation
⚠️ This plugin is published as TypeScript and JSX (for the React plugin) see this post on 𝕏 for the reasoning. Make sure to add the necessary types listed below if they are missing in your project and align your tsconfig.json
with { compilerOptions: { lib: ['DOM', 'ES2020'], module: 'Preserve', jsx: 'react-jsx' }}
as used for this project. React is only required when the masua/react
export is used.
bun install masua
bun install @types/bun # or @types/node
bun install @types/react # for React export
Usage
import { grid } from 'masua'
grid(document.querySelector('#my-grid'))
// With configuration options.
grid(document.querySelector('#my-custom-grid'), {
gutter: 20,
baseWidth: 300,
minify: false,
surroundingGutter: true,
singleColumnGutter: 10,
direction: 'rtl',
wedge: true,
})
React
import { Grid } from 'masua/react'
const MyGrid = () => (
<Grid disabled={window.innerWidth < 501} gutter={50}>
<Box />
<Box size={3} />
<Box size={2} />
<Box />
<Box size={6} />
<Box size={4} />
</Grid>
)