UNPKG

react-if-then-else-switch

Version:

A React library for declarative conditional rendering using If/Else and Switch/Case components for cleaner JSX.

70 lines (41 loc) ā€¢ 3.25 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# react-if-then-else-switch [![npm version](https://badge.fury.io/js/react-conditionally.svg)](https://www.npmjs.com/package/react-if-then-else-switch) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![TypeScript](https://img.shields.io/badge/--TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![NPM Downloads](https://img.shields.io/npm/dm/react-if-then-else-switch)](https://www.npmjs.com/package/react-if-then-else-switch) --- ## šŸš€ Declarative Conditional Rendering for React `react-if-then-else-switch` is a lightweight and intuitive library that provides declarative components for handling conditional rendering in your React applications. Say goodbye to deeply nested ternary operators and complex `&&` chains, and embrace cleaner, more readable JSX. --- ## šŸ“š Documentation & Demos Explore live examples and detailed usage instructions in our comprehensive documentation: šŸ‘‰ [View Documentation & Live Demos Here](https://library-documentation.vercel.app/documentation) šŸ‘ˆ ## āœØ Features - **`<IfElse>` Wrapper:** A powerful wrapper component that orchestrates your conditional logic. - **`<If>` Component:** Renders content only if its `condition` prop is `true`. - **`<ElIf>` Component:** (Else If) Renders content if its `condition` is `true` **AND** all preceding `If`/`ElIf` conditions within the same `<IfElse>` block were `false`. - **`<Else>` Component:** Renders content if no preceding `If` or `ElIf` conditions within the same `<IfElse>` block were `true`. - **`<Switch>` Component:** A declarative container that evaluates a value prop against multiple `<Case>` conditions. Only the first matching `<Case>` (or the `<Default>`) will render. - **`<Case>` Component:** Renders content if its condition prop (or a specific value prop, depending on your implementation) matches the value prop of the parent `<Switch>` component. - **`<Default>` Component:** Renders content if no preceding `<Case>` components within the same `<Switch>` block had a matching condition. This acts as the fallback for a Switch statement. --- ## šŸ“¦ Installation Install `react-if-then-else-switch` using npm or yarn: ```bash npm install react-if-then-else-switch # OR yarn add react-if-then-else-switch ``` ## šŸ¤” Why react-if-then-else-switch? ### While React's native JSX conditionals (&&, ? :) are powerful, they can lead to: - Nested Ternary Hell: Deeply nested ? : can quickly become unreadable and hard to maintain. - Verbose && Chains: Multiple && operators for else if logic can be awkward and less explicit. - Lack of Structure: It can be hard to visually parse complex conditional blocks. ### react-if-then-else-switch offers: - Improved Readability: Declarative components clearly indicate conditional blocks. - Structural Clarity: Your JSX visually reflects the if-else if-else flow. - Reduced Boilerplate: No need for manual wrapping of expressions for else conditions. ## šŸ¤ Contributing We welcome contributions! Please see our CONTRIBUTING.md for guidelines on how to contribute to this project, report bugs, and suggest features. ## šŸ“„ License This project is licensed under the MIT License.