Cacher is the code snippet organizer for pro developers

import * as React from "react"
import { Frame } from "framer"

type Props = {
    isOn: boolean
    onValueChange: (isOn: boolean) => any
}

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

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

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

    return (
        <Frame size="100%" onTap={handleTap}>
            {state.isOn.toString()}
        </Frame>
    )
}

Switch.defaultProps = {
    isOn: false,
    onValueChange: isOn => window.alert(isOn),
}