dynascale

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.