React-grip NPM

React Grip

A React component for creating resizable containers with smooth drag interactions.

Features

Smooth drag interactions
Customizable min and max widths
TypeScript support
Tailwind CSS styling
Accessible controls
Customizable control position

Installation

npm install react-grip
# or
yarn add react-grip

Usage

import { GripController } from "react-grip";

function App() {
  return (
    <GripController name="My Resizable Container" minWidth={300} maxWidth={800} controlPosition="top-right">
      <div>Your content here</div>
    </GripController>
  );
}

Props

Prop	Type	Default	Description
`name`	`string`	Required	Name of the container for accessibility
`minWidth`	`number`	Required	Minimum width in pixels
`maxWidth`	`number`	Required	Maximum width in pixels
`controlPosition`	`'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'`	`'top-right'`	Position of the resize control

License

MIT

react components ui typescript resizable drag grip container

0.0.2

4 months ago

0.0.1

4 months ago