React Night Light

A customizable night light component for React with an interactive pull-cord mechanism.

Live Demo

Features

• 💡 Realistic SVG light bulb with pull-cord toggle
• ⛓️ Interactive pull-down handle mechanism to toggle the light
• ✨ Physics-based animations for natural movement
• 🌈 Customizable appearance (wire color, length, pull distance)
• 🔄 Controlled and uncontrolled component modes
• 📱 Mobile / touch device compatible
• 📦 SVGs implemented as native React components (guaranteed to display correctly)
• ⚛️ Compatible with React 19

Requirements

• React 19+
• React DOM 19+

Installation

npm install react-night-light
# or
yarn add react-night-light

Usage

Controlled Mode

import React, { useState } from "react";
import { NightLight } from "react-night-light";

const MyComponent = () => {
  const [isLightOn, setIsLightOn] = useState(false);

  return (
    <div>
      <NightLight
        isOn={isLightOn}
        onToggle={(newState) => setIsLightOn(newState)}
      />
      <p>The light is currently {isLightOn ? "ON" : "OFF"}</p>
    </div>
  );
};

Uncontrolled Mode

import React from "react";
import { NightLight } from "react-night-light";

const MyComponent = () => {
  return (
    <div>
      <NightLight
        onToggle={(state) => console.log("Light is now:", state)}
      />
    </div>
  );
};

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------ | --------- | ------------------------------------------ | | isOn | boolean | undefined | Controls light state (for controlled mode) | | onToggle | (state: boolean) => void | undefined | Callback when light state changes | | wireColor | string | '#888' | Color of the pull wire | | maxPullDistance | number | 90 | Maximum pull distance (pixels) | | initialWireLength | number | 30 | Initial wire length (pixels) | | className | string | '' | Additional CSS class |

License

MIT

GitHub Repository