Toggle Component

An input component to indicate on or off.

Interface

declare namespace Toggle {
        interface SwitchProps extends React.HTMLAttributes<HTMLDivElement> {
                state: 1 | 0;
        }
        interface Props {
                Switch: React.FC<SwitchProps>;
                onSwitchStateChange?(state: 1 | 0): void;
                initialValue?: 1 | 0;
        }
}

Example Implementation

function Tooltip({ Content, Trigger }: Tooltip.Props) {
        const [contentIsShown, setContentIsShown] = useState(false);
        function onTriggerFocus() {
                setContentIsShown(true);
        }
        function onTriggerBlur() {
                setContentIsShown(false);
        }
        function onTriggerMouseEnter() {
                setContentIsShown(true);
        }
        function onTriggerMouseLeave() {
                setContentIsShown(false);
        }

        return (
                <div style={{ position: "relative" }}>
                        {contentIsShown && <Content />}
                        <Trigger
                                onBlur={onTriggerBlur}
                                onFocus={onTriggerFocus}
                                onMouseEnter={onTriggerMouseEnter}
                                onMouseLeave={onTriggerMouseLeave}
                        />
                </div>
        );
}

Toggle