Switch

The 2 3D switches enable users to toggle between an on and off state.

Toggle Switch

The toggle switch is a classic up and down flicking switch modeled after switches used in vintage audio equipment. This is model 2

Color Property

The

Color

prop allows you to change the color of the switch while maintaining its overall metal appearance. The color prop needs to be a string.

Example

<Switch model={2} color={"red"} /> <Switch model={2} color={"#1B263B"} />

Note: If you do not choose a color a default color will be applied for you. You may pass a string as a word ex: 'red' or as hex code in quotes

Size Property

The

Size

prop allows you to scale the size of the switch. This is a general scaling option and will increase or decrease the entire size of the object. The size property needs to be a number

Example

<Switch model={2} size={1} /> <Switch model={2} size={1.69} />

Note: The size property allows you to enter any positive number as an input including decimals. If you choose not to use the size property a default size will be applied for you.

Callback Function

The

Callback

prop allows you to pass in a function that will be called when the switch is in its on position. You can pass in any type of function you like. When the switch is down or ‘on’ then the callback function will be run.

Example

<Switch model={2} callback={() => {console.log('hello')}} /> <Switch model={2} callback={() => { counter++ }} />

Note: Please be aware of scope, and where you variables are, before passing in a function to be run.

Positioning

The

Position

prop allows you to move the component around the canvas. There are 3 different props you can use.

positionX

positionY

and

positionZ

Example

<Switch model={2} positionX={2} /><Switch model={2} positionY={3} positionZ={1} />

Note: The value must be a number

Slider Switch

The slider switch is a more modern left to right thumb switch. It was modeled off of switches used in more modern electronics. This is model 1

Color Property

The

mainColor

slideColor

onColor

and

offColor

props allow you to customize the color of each part of the switch. And just like the above color property you may use plain english for colors or hex code. Both properties need to be strings.

Example

<Switch model={1} mainColor={”red”} onColor={"red"} /> <Switch model={1} slideColor={"#1B263B"} offColor={"blue"}/>

Note: If you do not choose any colors they will be applied for you.

Size Property

The

Size

prop allows you to scale the size of the switch to your liking. This is a general scaling option and will increase or decrease the entire size of the object. The size property needs to be a number

Example

<Switch model={1} size={1} /> <Switch model={1} size={1.69} />

Note: The size property allows you to enter any positive number as an input including decimals. If you choose not to use the size property a default size will be applied for you.

Callback Function

The

Callback

Example

<Switch model={1} callback={() => {console.log(`hello`)}} /> <Switch model={1} callback={() => {counter ++ }} />

Note: Please be aware of scope, and where you variables are, before passing in a function to be run.

Tension

The

Tension

prop allows you to control the amount of ‘bounce’ the slider has when it is turned on or off. This must be a number greater than 0

Example

<Switch model={1} tension={.9} /><Switch model={1} tension={2.3} />

Note: I would recommend using smaller numbers to adjust this property. The internal value is multiplied by whatever you input. So small changes can have a large effect. The higher a number the faster and more precise the switch is. The smaller it is give it a softer bouncier feel. Again this is optional, and it will default to predetermined values if you don’t enter anything. The default values were meant to simulate the most realistic feel.

Positioning

The

Position

prop allows you to move the component around the canvas. There are 3 different props you can use.

positionX

positionY

and

positionZ

Example

<Switch model={1} positionX={2} /><Switch model={1} positionY={3} positionZ={1} />

Note: The value must be a number

Code Sample

Example

Open Sandbox

import { Canvas } from "@react-three/fiber";
import { Switch } from "r3dy";

export default function App() {
  return (
      <Canvas>
        <Switch />
      </Canvas>
  );
}