is-golden-ratio

A lightweight TypeScript/JavaScript library to check if a number is approximately the golden ratio (φ or phi ≈ 1.618033988749895).

Why I Created This

As a fullstack developer specializing in React, I often find myself building UI components that need to look visually pleasing. While working on a design system, I wanted to incorporate the golden ratio into my React components to achieve more aesthetically pleasing layouts and proportions.

I looked for existing solutions but couldn't find one that was:

• Written in TypeScript with proper type definitions
• Simple and focused on doing one thing well
• Easy to integrate with React components
• Well-tested and reliable

So I created this small package to make it easier for React developers to implement the golden ratio in their UI components and layouts.

Real-world Usage Examples

In React Components

import { isGoldenRatio } from 'is-golden-ratio';

// Tạo layout 2 cột theo tỷ lệ vàng
function TwoColumnLayout() {
  return (
    <div style={{
      display: 'grid',
      // Sử dụng tỷ lệ vàng để chia layout
      gridTemplateColumns: '61.8% 38.2%',
      gap: '20px'
    }}>
      <main>Main Content</main>
      <aside>Sidebar</aside>
    </div>
  );
}

// Kiểm tra tỷ lệ của card
function ProductCard({ width, height }) {
  const ratio = width / height;
  const isGolden = isGoldenRatio(ratio, 0.01);
  
  return (
    <div className={`card ${isGolden ? 'golden' : ''}`}>
      <img 
        src="product.jpg"
        width={width}
        height={height}
        alt="Product"
      />
    </div>
  );
}

In React Custom Hook

import { useState, useEffect } from 'react';
import { isGoldenRatio } from 'is-golden-ratio';

// Hook đơn giản để kiểm tra tỷ lệ của element
function useGoldenRatioCheck(ref) {
  const [isGolden, setIsGolden] = useState(false);

  useEffect(() => {
    if (ref.current) {
      const { width, height } = ref.current.getBoundingClientRect();
      setIsGolden(isGoldenRatio(width / height));
    }
  }, [ref]);

  return isGolden;
}

Checking Image Dimensions

function ImageUploader() {
  const checkImageRatio = (file) => {
    const img = new Image();
    img.onload = () => {
      const ratio = img.width / img.height;
      if (isGoldenRatio(ratio, 0.1)) {
        console.log('Image follows golden ratio! 🎨');
      }
    };
    img.src = URL.createObjectURL(file);
  };

  return (
    <input 
      type="file" 
      accept="image/*"
      onChange={(e) => checkImageRatio(e.target.files[0])}
    />
  );
}

Installation

Using npm:

npm install is-golden-ratio

Using yarn:

yarn add is-golden-ratio

Usage

JavaScript / TypeScript

import { isGoldenRatio } from 'is-golden-ratio';

// Check with default precision (0.000001)
console.log(isGoldenRatio(1.618033988749895)); // true
console.log(isGoldenRatio(1.618033)); // true
console.log(isGoldenRatio(1.62)); // false

// Check with custom precision
console.log(isGoldenRatio(1.62, 0.01)); // true
console.log(isGoldenRatio(1.618033, 0.0000001)); // false

// Edge cases
console.log(isGoldenRatio(0)); // false
console.log(isGoldenRatio(-1.618033988749895)); // false

CommonJS

const { isGoldenRatio } = require('is-golden-ratio');

console.log(isGoldenRatio(1.618033988749895)); // true

API

isGoldenRatio(ratio: number, precision?: number): boolean

Checks if a number is approximately equal to the golden ratio.

Parameters

• ratio (number): The number to check
• precision (number, optional): The maximum allowed difference from the golden ratio. Defaults to 0.000001

Returns

• boolean: Returns true if the number is within the specified precision of the golden ratio, false otherwise

Throws

• Throws an Error if precision is zero or negative

What is the Golden Ratio?

The golden ratio (φ or phi) is an irrational number approximately equal to 1.618033988749895. It appears frequently in mathematics, art, architecture, and nature. Two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities.

Development

Requirements

• Node.js >= 14.0.0
• npm >= 6.0.0

Setup

1. Clone the repository

git clone https://github.com/duydev/is-golden-ratio.git
cd is-golden-ratio

2. Install dependencies

npm install

3. Run tests

npm test

Available Scripts

• npm run build - Builds the package
• npm run test - Runs tests
• npm run test:watch - Runs tests in watch mode
• npm run test:coverage - Runs tests with coverage report
• npm run lint - Runs ESLint
• npm run lint:fix - Fixes ESLint errors
• npm run format - Formats code with Prettier

License

MIT © Tran Nhat Duy