React Pannable Zoomable Gridable Content

This is a light and simple react component for panning and zooming html elements.

Key Features

🚀 Fast and easy to use

🧚🏻 No external dependencies

🔧 Highly customizable

🌐 Show grid ontop of the content

🔲 Make a selection on grid

Installation

npm install --save react-zoom-pan-grid
or
yarn add react-zoom-pan-grid

Examples

import { CSSProperties, useState } from 'react';
import { Box, BoxProvider } from 'react-zoom-pan-grid';

const imgStyle: CSSProperties = {
    position: 'absolute',
    top: '0',
    left: '0',
    userSelect: 'none',
    pointerEvents: 'none',
    width: '100%',
    height: '100%',
};

const buttonStyle: CSSProperties = {
    display: 'block',
    fontSize: '0.5rem',
    backgroundColor: 'transparent',
    padding: '2px',
    boxSizing: 'border-box',
    marginTop: '1px',
    color: 'white',
    whiteSpace: 'nowrap',
    border: '1px solid',
    borderImageSlice: '1',
    borderWidth: '1px',
    borderImageSource: 'linear-gradient(315deg, #743ad5, #d53a9d)',
    cursor: 'pointer',
    transition: 'border-image-source 0.1s ease-in-out',
};

export default function App() {
    const [cellSize, _setCellSize] = useState(5);
    const [dimensions, _setDimensions] = useState(100);

    return (
        <BoxProvider>
            <Box
                style={{ backgroundColor: '#eeeeee22' }}
                gridOptions={{
                    enable: true,
                    cellSize,
                    dimensions,
                    lineWidth: 0.1,
                }}
                selectOptions={{
                    enable: true,
                    maskOptions: {
                        lineWidth: 2,
                    },
                    component: (
                        <button onClick={() => console.log('Hello')} style={buttonStyle}>
                            Click
                        </button>
                    ),
                }}>
                <img src="https://picsum.photos/500/500" style={imgStyle} />
            </Box>
        </BoxProvider>
    );
}

Caveat

This package does not work properly with React.UseStrict double rendering, remove it to properly work with it.

License

MIT © Sagi Hammer