Skip to content

Latest commit

 

History

History
67 lines (53 loc) · 1.98 KB

readme.md

File metadata and controls

67 lines (53 loc) · 1.98 KB
Raw

React IMG PIECES

npm version npm downloads

DEMO

Usage

import { ImagePiece } from 'react-img-pieces'

<ImagePiece
    height={500}
    width={500}
    pieces={200} // should be an even number
    imgSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0SE9RDpKMsDAs37MK2YCCFDOYF4cAA9wmyjEPkXTRykekmRUcmYX4hqD7PQgBl8bdFt0&usqp=CAU"
    animationDirection="alternate"
    animationDuration="1s"
    animationIterationCount="infinite"
/>

Buy me a coffee

If you like this project, please consider buy me a coffee :)

https://www.buymeacoffee.com/saurabhK100

Features

  • Boilerplate setup for creating React TypeScript npm packages
  • Bundling using Rollup
  • TypeScript for static typing
  • ESLint with TypeScript support for code linting
  • Prettier for code formatting
  • Linting and formatting automation with GitHub Actions

Scripts

  • npm run build: Build the package using Rollup.
  • npm run lint: Run ESLint to check the code for linting errors.
  • npm run format: Format the code using Prettier.
  • npm start: Start the development server with watch mode.

Development

Step 1: Install the dependencies in root project and example project:

npm install

Step 2: Start the development server in both root and example project:

npm start

Using npm link to Test Local Package

Step 1:

Create a symlink globally for your package:

npm link

Step 2:

Navigate to the example folder and run below command

npm link ../

Any changes you make to the package will be reflected immediately in the example project without the need to rebuild or reinstall the package.