https://github.com/aminnairi/react-switch
A simple JavaScript-like switch component for React written in TypeScript
https://github.com/aminnairi/react-switch
component condition library react switch
Last synced: about 2 months ago
JSON representation
A simple JavaScript-like switch component for React written in TypeScript
- Host: GitHub
- URL: https://github.com/aminnairi/react-switch
- Owner: aminnairi
- License: mit
- Created: 2023-05-23T17:01:25.000Z (about 3 years ago)
- Default Branch: development
- Last Pushed: 2023-06-03T12:46:25.000Z (about 3 years ago)
- Last Synced: 2026-02-12T00:49:18.001Z (4 months ago)
- Topics: component, condition, library, react, switch
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@aminnairi/react-switch
- Size: 47.9 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# @aminnairi/react-switch
A simple JavaScript-like switch component for React written in TypeScript
[](https://www.npmjs.com/package/@aminnairi/react-switch) [](https://bundlephobia.com/package/@aminnairi/react-switch) [](https://github.com/aminnairi/react-switch/blob/development/sources/package.json)
## Summary
- [Requirements](#requirements)
- [Quick Start](#quick-start)
- [API](#api)
- [Switch](#switch)
- [Case](#case)
- [Default](#default)
- [DefaultSwitch](#defaultswitch)
- [License](#license)
- [Contributing](#contributing)
- [Changelog](#changelog)
## Requirements
- [Node](https://nodejs.org/en)
- [NPM](https://www.npmjs.com/)
[Back to summary](#summary).
## Quick Start
```bash
npm install react react-dom @aminnairi/react-switch
npm install --save-dev vite @types/react @types/react-dom
```
```bash
touch main.tsx
```
```typescript
import 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>([]);
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 (
Loading your articles, please wait...
Something went wrong: {error}
There is no articles to display.
You have {articles.length} published article.
You have {articles.length} published articles.
);
};
```
```bash
touch index.tsx
```
```typescript
import 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(
);
```
```bash
touch index.html
```
```html
```
```bash
npx vite
```
[Back to summary](#summary).
## API
[Back to summary](#summary).
### Switch
```typescript
import { ReactNode } from "react";
export interface SwitchProps {
children: ReactNode;
}
export declare const Switch: ({ children }: SwitchProps) => ReactNode;
```
[Back to summary](#summary).
### Case
```typescript
import { ReactNode } from "react";
export interface CaseProps {
when: boolean;
children: ReactNode;
}
export declare const Case: ({ children }: CaseProps) => ReactNode;
```
[Back to summary](#summary).
### Default
```typescript
import { ReactNode } from "react";
export interface DefaultProps {
children: ReactNode;
}
export declare const Default: ({ children }: DefaultProps) => ReactNode;
```
[Back to summary](#summary).
### DefaultSwitch
```typescript
import { ReactNode } from "react";
export declare const DefaultSwitch: ({ children }: SwitchProps) => ReactNode
```
[Back to summary](#summary).
## License
See [`LICENSE`](https://github.com/aminnairi/react-switch/blob/development/LICENSE).
[Back to summary](#summary).
## Contributing
See [`CONTRIBUTING.md`](https://github.com/aminnairi/react-switch/blob/development/CONTRIBUTING.md).
[Back to summary](#summary).
## Changelog
See [`CHANGELOG.md`](https://github.com/aminnairi/react-switch/blob/development/sources/CHANGELOG.md).
[Back to summary](#summary).