1.1.5 • Published 5 months ago

good-grid v1.1.5

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Installation

npm install good-grid

Usage

Here is how you can use the core APIs to size and position the grid elements:

// get dimensions of the parent element and pass it to `createGrid`
const { width, height, getPosition } = createGrid({
  dimensions,
  count: participants.length,
  aspectRatio: '16:9',
  gap: 10,
})

const elements = document.querySelectorAll('.participant-tile')

elements.forEach((element, index) => {
  // get position of element at the specified index
  const { top, left } = getPosition(index)

  element.style.width = width
  element.style.height = height
  element.style.top = top
  element.style.left = left
})

React

A minimal example of the API usage in React.

import { useGridDimensions, useGoodGrid } from 'good-grid/react'

function App() {
  const $el = useRef()

  // hook that listens to resize of the element
  // and returns it's dimensions
  const dimensions = useGridDimensions($el)

  const { width, height, getPosition } = useGoodGrid({
    dimensions,
    count: participants.length,
    aspectRatio: '16:9',
    gap: 10,
  })

  return (
    <div className="container" ref={$el}>
      {participants.map((participant, index) => {
        const { top, left } = getPosition(index)

        return (
          <div
            className="grid-item"
            style={{
              width,
              height,
              top,
              left,
              position: 'absolute',
              transition: '0.4s all',
            }}
            key={participant.name}
          >
            {participant.name}
          </div>
        )
      })}
    </div>
  )
}
1.1.5

5 months ago

1.1.4

5 months ago

1.1.3

5 months ago

1.1.2

1 year ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago

0.3.0-1

2 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.0-2

3 years ago

0.1.0-1

3 years ago

0.1.0

3 years ago