A Toggle Switch in the style of Pokeball!

With this project, I wanted to create a toggle switch that looks like a Pokéball.

The switch is a toggle switch, which means that it can be turned on and off.

Currently only React is tested and the CSS is uncompiled so it won't work on Next.js.

The credit for the design goes to Mina who had made an amazing codepen here Pokeball. which you should check out.

To use the switch, first download it using from npm using npm or yarn

$ npm install pokeball-toggle

Inside your project import the Pokeball_Switch from pokeball-toggle and use it as a component

import { Pokeball_Switch } from "pokeball-toggle";

<Pokeball_Switch />;

Currently the component also contains an onClick prop listener which you can pass

import { Pokeball_Switch } from "pokeball-toggle";

const log = () => {
  console.log("clicked");
};

<Pokeball_Switch
  onClick={() => {
    log();
  }}
/>;

This is still a work in progress and open source so feel free to contribute to it and make it better!

Also check out Mina's Twitter account here where she posts amazing css design tutorials and tips !

You can find my twitter account over here