Skip to content

README.md

Latest commit

 

History

History
113 lines (75 loc) · 3.47 KB

README.md

File metadata and controls

113 lines (75 loc) · 3.47 KB

DarkSwitch

React TypeScript Gzipped Size

Current version: 1.0.5 🚀

The bring-me-the-designer switch for toggling the light and dark mode

🔗 Live Demo

📦 Repository


🗝 Features

  • Customizable size: small, medium, or large.
  • Simple integration with minimal setup.
  • Lightweight and easy to use cuz it is purely CSS (no additional animation libraries needed)

🚀 Installation

Install the package via npm:

npm install dark-switch-react

Or, if you're using yarn:

yarn add dark-switch-react

🪄 How to make the magic happen

import React, { useState } from 'react';
import { DarkSwitch } from 'dark-switch';

const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <div className={isDarkMode ? 'dark' : 'light'}>
      <DarkSwitch
        size="large"
        isDark={isDarkMode}
        onClick={() => setIsDarkMode(!isDarkMode)}
      />
    </div>
  );
};

📝 Props

Name Type Description Default
size 'small' | 'medium' | 'large' The size of the switch. 'medium'
isDark boolean Whether the switch is in dark mode or not. false
className string Custom className -
onClick () => void Callback function triggered when the switch is toggled. Required

👁️ Styling

The component uses scss for styling. You can customize the styles in your project by overriding the following classes:

  • switch-small
  • switch-medium
  • switch-large
  • slider
  • left-cloud
  • right-cloud

You can also import your cloud images for the left and right sides of the toggle if desired.


Story behind

So, one day, my class got canceled (score!), and I was chilling in the school's cafeteria, scrolling through IG then I came across a meme about 🪖 Designer vs Developer 🪖.

The designer had created this ultra-slick, animated dark mode switch that seemed like wizards crafted it. Naturally, I scrolled down through the comments (because, come on, who doesn't do that 👀), and Some dude had actually made it in Figma!

Designer: 1, Developer: 0.

I thought "Wait a minute, I can balance this match and bring glory to the developer team✌️" So, challenge accepted, and DarkSwitch was born.

🤙 I'm always open to any valuable contributions! 🤙

DarkSwitch was just created in a single afternoon, so if you have ideas for improvements, bug fixes, or new features, feel free to open an issue or submit a pull request. All contributions are welcome 🥂

License

MIT License. See the LICENSE file for details.