A customizable switch component for React applications
npm install @usmangurowa/react-switchshell
npm install @usmangurowa/react-switch
`
Install the package using yarn:
`shell
yarn add @usmangurowa/react-switch
`
Usage
Here's a basic example of how to use @usmangurowa/react-switch:
`jsx
import React from "react";
import { Switch, Case } from "@usmangurowa/react-switch";
const App = () => {
const condition = true;
return (
This is displayed when the condition is true
This is displayed when the condition is false
);
};
export default App;
`
API
$3
The Switch component renders the first matching Case component based on the provided condition.
Props:
- case (optional): The condition to match against. Accepts a string.
- children: The Case components to render.
$3
The Case component represents a case within the Switch component.
Props:
- when (optional): The condition to match against. Accepts a string.
- case (optional): Same thing as when.
- component (optional): A custom component to render when the condition matches.
- children: The content to render when the condition matches.
Examples
$3
`jsx
import React, { useState } from "react";
import { Switch, Case } from "@usmangurowa/react-switch";
const ToggleSwitch = () => {
const [isOn, setIsOn] = useState(false);
const handleToggle = () => {
setIsOn(!isOn);
};
return (
);
};
export default ToggleSwitch;
`
$3
`jsx
import React, { useState } from "react";
import { Switch, Case } from "@usmangurowa/react-switch";
const UserRoleSwitch = () => {
const [userRole, setUserRole] = useState("user");
const handleChangeUserRole = (role) => {
setUserRole(role);
};
return (
);
};
export default UserRoleSwitch;
``