Flipify

NPM Version NPM Unpacked Size NPM License NPM Downloads NPM Last Update NPM Type Definitions

Flipify is a TypeScript library for declarative Flip animations.

Features

Declarative Trigger-Based Animations

Flipify allows for concise and clear implementation of Flip animations declaratively. Users can create animations with a single trigger function.
Strong Type Safety with TypeScript

Flipify offers detailed and intuitive type definitions, making it reliable and predictable.
Flexible Style Customization

Flipify enables detailed control over style properties to meet diverse requirements while remaining easy to use with default values.
Responsive Design Support

Flipify works seamlessly across various screen sizes.

Installation

npm install @flipify/core

pnpm add @flipify/core

yarn add @flipify/core

Usages

JavaScript

<div id="flip-container"></div>

import { initialize } from '@flipify/core';

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('div.flip-container');

  console.log(container);

  container.style.width = '100vw';
  container.style.height = '100vh';

  let currentNumber = 97;
  const { trigger } = initialize(container, currentNumber, { useDigit: true });

  const interval = setInterval(() => {
    currentNumber += 1;

    if (trigger) {
      trigger(currentNumber);
    }
  }, 1000);

  window.addEventListener('unload', () => {
    clearInterval(interval);
  });
});

React

import { initialize } from '@flipify/core';
import React, { useEffect, useRef, useState } from 'react';

export const Flip: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<((value: number) => void) | null>(null);
  const [currentNumber, setCurrentNumber] = useState(0);

  useEffect(() => {
    const container = containerRef.current;

    if (!container) return;

    const { trigger } = initialize(container, currentNumber, { useDigit: true });

    triggerRef.current = trigger;
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentNumber((prev) => prev + 1);

      if (triggerRef.current) {
        triggerRef.current(currentNumber);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [currentNumber]);

  return <div ref={containerRef} style={{ height: '50vh' }} />;
};

Options

Option	Type	Description	Default	Remarks
`useDigit`	`boolean`	Toggle digit change	`false`	`true`, `false`
`animation.duration`	`TDuration`	Animation duration	`500`	In `ms`, e.g., `1000`, `500`
`style.card.width`	`TDimension`	Width of the card	`300px`	Can also use `number`, e.g., `100px`, `20%`, `10rem`, `100`
`style.card.height`	`TDimension`	Height of the card	`400px`	Can also use `number`, e.g., `200px`, `20%`, `10rem`, `200`
`style.card.fontSize`	`TDimension`	Font size of the card	`200px`	Can also use `number`, e.g., `20px`, `3rem`, `18`
`style.card.borderRadius`	`TDimension`	Border radius of card	`10px`	Can also use `number`, e.g., `10px`, `50%`, `5`
`style.centerLine.height`	`TDimension`	Height of the center line	`10px`	Can also use `number`, e.g., `2px`, `1rem`, `5`
`style.centerLine.backgroundColor`	`TColor`	Background color of center line	`#DDDDDD50`	E.g., `#000000`, `rgba(0, 0, 0, 0.2)`
`style.number.color`	`TColor`	Color of the number	`#FFFFFF`	E.g., `white`, `#ff5722`, `rgb(0, 0, 0)`
`style.number.backgroundColor`	`TColor`	Background color of number	`#000000`	E.g., `black`, `#eeeeee`, `rgb(255, 255, 255)`

Licenses

MIT License