A styled switch for React built using Emotion CSS and Framer motion

Last update: Aug 27, 2021

Demo

Demo: https://react-styled-switch.vercel.app

I became somewhat obssesed with the different styles of switches on different operating systems and how they behave so I decided to create this project to recreate them using React.

High level vision for this project

A switch in React using Emotion CSS, and Framer motion.

I want to evolve this to offer different switch styles and allowing importing only the style you want.

Eventually, once I decide on the name and API, I will publish it as a standalone package that can be imported from NPM.

GitHub

https://github.com/haideralsh/react-styled-switch
You might also like...

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Jun 11, 2021

Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components

Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components

Simple Styled Form Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utiliza

Oct 29, 2021

🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.

🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.

Movie Screen - Exercitando React, Styled Components e Sass 🎛️ Dependencias React Styled Components Sass React Icons 🎯 Objetivo O principal intuito d

Dec 28, 2021

Styled Components for React Native the way they should have been.

💄 Styled-RN Styled Components for React Native the way they should have been. Inspired by this article Intro Why 💄 styled-rn it better than 💅🏼 sty

Jun 13, 2022

🔧 💅 Jest utilities for Styled Components

Jest Styled Components A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides

Jun 21, 2022

Front-End Mentor: Landing page usando ReactJS + Styled Components

Front-End Mentor: Landing page usando ReactJS + Styled Components

Front-End Mentor: Fylo Landing Page ✨ O projeto se trata de um desafio disponível no site Front-End Mentor. A ideia é desenvolver um código que se apr

Feb 14, 2022

A CSS & React built Split Flap or Solari display

React Split Flap Display A React component that mimics a Split-Flap/Solari display, cos I like Solari boards & wanted to practice creating NPM modules

May 17, 2022

🏠 Airbnb website using React, Next.js and Tailwind CSS

🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022

Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
Comments
  • 1. Add a demo page

    Adds a page that shows the different kinds of switches available and some of the props we can pass to them. This page will be statically hosted and provides a way to get a feel of what the library offers.

    Reviewed by haideralsh at 2021-05-17 03:10
  • 2. Use the term `switch` instead of `toggle`

    Initially I used the toggle, but it became apparent to me with time that Switch is what most libraries and interface guides use as a term to describe this type of component.

    Reviewed by haideralsh at 2021-03-28 20:10
  • 3. Implement different sizes for the IosToggle

    A first attempt at creating different sizes for toggles starting with the IosToggle.

    • Adds a new prop size with possible values of: 'small' | 'medium' | 'large'
    • Implement the 3 sizes for the IosToggle using eyeballed values
    Reviewed by haideralsh at 2021-03-27 02:55
  • 4. Add Windows Phone 7 light theme toggle

    In this PR I am attempting to recreate the original Windows Phone 7 toggle. There aren't many examples for light themed Windows Phone 7 on the web; this PR was partially based on this screenshot:

    pictures-screen-pictures-camera-settings

    Reviewed by haideralsh at 2021-03-05 01:47
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Jan 3, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jun 19, 2022
Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021
Simple Portfolio Using React Hooks & Styled Components
Simple Portfolio Using React Hooks & Styled Components

Said MOUNAIM To view a live example, click here. Getting Started These instructi

Jun 16, 2022
A terminal style/styled portfolio website made with <3 using react.

A Terminal Styled Portfolio Website. ??‍??, a terminal style/styled portfolio website made with <3 using react.

Jun 23, 2022
The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Jul 13, 2021
Typograpy components for react and styled-components
Typograpy components for react and styled-components

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

May 1, 2022