Toggle

Toggle is a boolean switch. Maps to UI Toolkit's Toggle.

Import

import { Toggle } from "onejs-react"

Basic Usage

function Settings() {
    const [enabled, setEnabled] = useState(false)

    return (
        <Toggle
            value={enabled}
            onChange={(e) => setEnabled(e.value)}
            label="Enable notifications"
        />
    )
}

Props

Prop	Type	Description
`value`	`boolean`	Current state
`label`	`string`	Label text
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)
`onChange`	`(e) => void`	Change handler

Settings List

function SettingsPanel() {
    const [settings, setSettings] = useState({
        sound: true,
        music: true,
        vibration: false,
        notifications: true,
    })

    const toggle = (key) => {
        setSettings(s => ({ ...s, [key]: !s[key] }))
    }

    return (
        <View>
            <Toggle
                value={settings.sound}
                onChange={() => toggle("sound")}
                label="Sound Effects"
                style={{ marginBottom: 15 }}
            />
            <Toggle
                value={settings.music}
                onChange={() => toggle("music")}
                label="Background Music"
                style={{ marginBottom: 15 }}
            />
            <Toggle
                value={settings.vibration}
                onChange={() => toggle("vibration")}
                label="Vibration"
                style={{ marginBottom: 15 }}
            />
            <Toggle
                value={settings.notifications}
                onChange={() => toggle("notifications")}
                label="Push Notifications"
            />
        </View>
    )
}

Styled Toggle

<Toggle
    value={active}
    onChange={(e) => setActive(e.value)}
    label="Dark Mode"
    style={{
        marginBottom: 10,
    }}
/>

Without Label

<View style={{ flexDirection: "row", alignItems: "center" }}>
    <Label text="Enable feature" style={{ marginRight: 10 }} />
    <Toggle
        value={enabled}
        onChange={(e) => setEnabled(e.value)}
    />
</View>