A simple library to easily create a dimension selector using react hooks

by React

React dimension select

A minimal dimension selector using react hooks

Install

npm i react-dimension-select

How to use

Example code:

import React from 'react'

import classNames from 'classnames'
import { DimensionPreview, useDimensionsSelect, DimensionsOptions, DimensionsSelector } from 'react-dimension-select'

const defaultImage =
  'https://images.unsplash.com/photo-1602826347632-fc49a8675be6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'

// The options available to select
const dimensionsOptions: DimensionsOptions = [
  {
    // Name of the option
    name: '16:9',
    // The final dimension in px
    dimensions: [1920, 1080],
    // This gets the width and height of the current preview
    // and returns what height and width the preview should be
    getPreviewDimensions: ({ width }) => ({
      width,
      height: width / 1.7777777777777777
    }),
    // Icon to show
    icon: (selected) => (
      <div
        className={classNames(
          'border-2  group-hover:border-indigo-500 rounded-sm w-20 h-[45px]',
          selected ? 'border-indigo-500' : 'border-gray-500'
        )}
      />
    )
  },
  {
    name: '1:1',
    dimensions: [1080, 1080],
    getPreviewDimensions: ({ height }) => ({
      height,
      width: height
    }),
    icon: (selected) => (
      <div
        className={classNames(
          'border-2  group-hover:border-indigo-500 rounded-sm  w-[45px] h-[45px]',
          selected ? 'border-indigo-500' : 'border-gray-500'
        )}
      />
    )
  },
]

function App() {
  const { previewProps, selectorProps } = useDimensionsSelect(dimensionsOptions)

  return (
    <div className="w-full flex flex-col min-h-screen justify-center items-center bg-gray-800 text-white">
      <div className="mt-2 mx-auto grid items-center py-2 justify-center h-full w-full max-w-lg">
        <DimensionPreview image={defaultImage} {...previewProps} />
      </div>

      <DimensionsSelector {...selectorProps} />

      <div className='mt-3'>
        Selected Option: {selectedOption.name}, Dimensions: {selectedOption.dimensions.join('x')}
      </div>
    </div>
  )
}

export default App

The components:

  • useDimensionsSelect hook:

    This hook takes in dimension options like

    const dimensionsOptions: DimensionsOptions = [
  {
    name: '16:9',
    dimensions: [1920, 1080],
    getPreviewDimensions: ({ width }) => ({
      width,
      height: width / 1.7777777777777777
    }),
    icon: (selected) => (
      <div
        className={classNames(
          'border-2 w-20 h-[45px]',
          selected ? 'border-indigo-500' : 'border-gray-500'
        )}
      />
    )
  },
]

    and returns the following:

    {
  // Currently selected option
  selectedOption,
  // Index of currently selected option
  selectedIndex,
  // A function to select an option, take in the option's index
  // eg: setSelectedIndex(1)
  setSelectedIndex,
  // A function to set the option which is being hovered or is to be previewed
  // eg: setHoveringIndex(1) or setHoveringIndex(null)
  setHoveringIndex,
  // Index of option currently being hovered
  hoveringIndex,
  // This object can directly be passed to DimensionsSelector
  // eg: <DimensionsSelector {...selectorProps} />
  selectorProps: { ... },
  // This object can directly be passed to DimensionPreview
  // eg: <DimensionPreview {...previewProps} />
  previewProps: { ... }
}

GitHub

View Github