Dynascale

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

Table of Contents

• Dynascale
  • Table of Contents
  • Features
  • Installation
  • Usage
  • Props
  • License

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.