@aminnairi/react-switch
v0.6.1
Published
A simple JavaScript-like switch component for React written in TypeScript
Downloads
20
Maintainers
aminnairiReadme
@aminnairi/react-switch
A simple JavaScript-like switch component for React written in TypeScript
Summary
Requirements
Quick Start
npm install react react-dom @aminnairi/react-switch
npm install --save-dev vite @types/react @types/react-domtouch main.tsximport React, { useEffect, useState } from 'react'
import { Switch, Case, Default, DefaultSwitch } from "@aminnairi/react-switch";
interface Article {
id: number;
title: string;
body: string;
}
export const Main = () => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [articles, setArticles] = useState<Array<Article>>([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts").then(response => {
if (response.ok) {
return response.json();
}
return Promise.reject(new Error("Unable to fetch articles."));
}).then(json => {
setArticles(json);
}).catch((error: unknown) => {
setError(String(error));
}).finally(() => {
setLoading(false);
});
}, []);
return (
<Switch>
<Case when={loading}>
<p>Loading your articles, please wait...</p>
</Case>
<Case when={Boolean(error)}>
<p>Something went wrong: {error}</p>
</Case>
<DefaultSwitch>
<Case when={articles.length === 0}>
<p>There is no articles to display.</p>
</Case>
<Case when={articles.length === 1}>
<p>You have {articles.length} published article.</p>
</Case>
<Default>
<p>You have {articles.length} published articles.</p>
</Default>
</DefaultSwitch>
</Switch>
);
};touch index.tsximport React from "react";
import { createRoot } from "react-dom/client";
import { Main } from "./main";
const rootElement = document.getElementById("root");
if (!rootElement) {
throw new Error("Root element not found");
}
const root = createRoot(rootElement);
root.render(
<Main />
);touch index.html<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
</html>npx viteAPI
Switch
import { ReactNode } from "react";
export interface SwitchProps {
children: ReactNode;
}
export declare const Switch: ({ children }: SwitchProps) => ReactNode;Case
import { ReactNode } from "react";
export interface CaseProps {
when: boolean;
children: ReactNode;
}
export declare const Case: ({ children }: CaseProps) => ReactNode;Default
import { ReactNode } from "react";
export interface DefaultProps {
children: ReactNode;
}
export declare const Default: ({ children }: DefaultProps) => ReactNode;DefaultSwitch
import { ReactNode } from "react";
export declare const DefaultSwitch: ({ children }: SwitchProps) => ReactNodeLicense
See LICENSE.
Contributing
See CONTRIBUTING.md.
Changelog
See CHANGELOG.md.