Cacher is the code snippet organizer for pro developers

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

export function Switch(props) {
    const [state, setState] = React.useState({
        isOn: props.isOn,
    })

    React.useEffect(() => {
        if (state.isOn !== props.isOn) {
            setState({
                isOn: props.isOn,
            })
        }
    }, [props.isOn])

    const flipSwitch = () => {
        setState({
            isOn: !state.isOn,
        })
    }

    return (
        <Frame
            height={50}
            width={80}
            center
            borderRadius={25}
            onTap={flipSwitch}
            variants={{
                off: { background: "#BBBBBB" },
                on: { background: "#0070DF" },
            }}
            initial={state.isOn ? "on" : "off"}
            animate={state.isOn ? "on" : "off"}
            transition={{
                type: "tween",
                duration: 0.2,
            }}
        >
            <Frame
                size={46}
                top={2}
                left={2}
                borderRadius={"100%"}
                background="#FFFFFF"
                variants={{
                    off: { x: 0 },
                    on: { x: 30 },
                }}
                transition={{
                    type: "tween",
                    duration: 0.2,
                }}
            />
        </Frame>
    )
}

Switch.defaultProps = {
    isOn: false,
}

addPropertyControls(Switch, {
    isOn: {
        type: ControlType.Boolean,
        title: "On",
        defaultValue: false,
    },
})