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"} />
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 numberExample
<Switch model={2} size={1} /> <Switch model={2} size={1.69} />
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++ }} />
Position
prop allows you to move the component around the canvas. There are 3 different props you can use.positionX
,positionY
andpositionZ
Example
<Switch model={2} positionX={2} /><Switch model={2} positionY={3} positionZ={1} />
mainColor
,slideColor
,onColor
andoffColor
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"}/>
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 numberExample
<Switch model={1} size={1} /> <Switch model={1} size={1.69} />
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={1} callback={() => {console.log(`hello`)}} /> <Switch model={1} callback={() => {counter ++ }} />
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 0Example
<Switch model={1} tension={.9} /><Switch model={1} tension={2.3} />
Position
prop allows you to move the component around the canvas. There are 3 different props you can use.positionX
,positionY
andpositionZ
Example
<Switch model={1} positionX={2} /><Switch model={1} positionY={3} positionZ={1} />
Example
import { Canvas } from "@react-three/fiber";
import { Switch } from "r3dy";
export default function App() {
return (
<Canvas>
<Switch />
</Canvas>
);
}