motion-box

motion-box

A super simple abstraction of Chakra UI's Box component, enhanced with Framer Motion props from the motion API.

Install

This packages requires Chakra UI and its peer dependencies. If you haven't installed Chakra UI in your project, find the necessary pacakges here.

Using npm:

npm install motion-box

Using yarn:

yarn add motion-box

Usage

import MotionBox from 'motion-box';

function Example() {
  return (
    <MotionBox
      height="40px"
      bg="red.300"
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  );
}

Demo

See a working demo using motion-box here