React Switch is a customizable switch component for React applications.
Install the package using npm:
npm install @usmangurowa/react-switchInstall the package using yarn:
yarn add @usmangurowa/react-switchHere's a basic example of how to use @usmangurowa/react-switch:
import React from "react";
import { Switch, Case } from "@usmangurowa/react-switch";
const App = () => {
const condition = true;
return (
<Switch case={condition.toString()}>
<Case when="true">
<h1>This is displayed when the condition is true</h1>
</Case>
<Case when="false">
<h1>This is displayed when the condition is false</h1>
</Case>
</Switch>
);
};
export default App;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: TheCasecomponents to render.
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 aswhen.component(optional): A custom component to render when the condition matches.children: The content to render when the condition matches.
import React, { useState } from "react";
import { Switch, Case } from "@usmangurowa/react-switch";
const ToggleSwitch = () => {
const [isOn, setIsOn] = useState(false);
const handleToggle = () => {
setIsOn(!isOn);
};
return (
<Switch case={isOn}>
<Case when={true}>
<button onClick={handleToggle}>ON</button>
</Case>
<Case when={false}>
<button onClick={handleToggle}>OFF</button>
</Case>
</Switch>
);
};
export default ToggleSwitch;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 (
<Switch case={userRole}>
<Case when="admin">
<button onClick={() => handleChangeUserRole("user")}>
Switch to User
</button>
</Case>
<Case when="user">
<button onClick={() => handleChangeUserRole("admin")}>
Switch to Admin
</button>
</Case>
</Switch>
);
};
export default UserRoleSwitch;Contributions are welcome! Feel free to open an issue or submit a pull request.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent