JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 13
  • Score
    100M100P100Q89164F
  • License MIT

Package Exports

  • dynascale

Readme

NPM Version NPM Last Update NPM Type Definitions NPM Downloads

Dynascale

A dynamic scaling component for React that automatically scales its children to fit within their container while maintaining aspect ratio.

Table of Contents

Features

  • Automatic Scaling: Scales content to always fit its container.
  • Aspect Ratio Preservation: Maintains the original aspect ratio of the content.

Installation

yarn add dynascale
# or
npm install dynascale

Usage

import React from 'react';
import { Dynascale } from 'dynascale';

const Example = () => (
  <div style={{ width: 400, height: 300, border: '1px solid #ccc' }}>
    <Dynascale margin={0.05} debug={true}>
      <div style={{ width: 600, height: 400, background: '#eee' }}>
        This content will always fit and scale!
      </div>
    </Dynascale>
  </div>
);

export default Example;

Props

Name Type Default Description
defaultScale number 0 Initial scale value.
minScale number 0.1 Minimum allowed scale factor.
margin number 0 Margin as a percentage (0–1) to leave around the scaled content.
className string '' Additional class names for the container.
debug boolean false Show debug information overlay.
children ReactNode Content to be scaled.

License

This project is licensed under the MIT License.