https://github.com/aminnairi/preact-switch

Preact component for conditional rendering
https://github.com/aminnairi/preact-switch

case component default preact switch

Last synced: about 3 hours ago
JSON representation

Preact component for conditional rendering

• Host: GitHub
• URL: https://github.com/aminnairi/preact-switch
• Owner: aminnairi
• License: gpl-3.0
• Created: 2021-07-09T12:42:21.000Z (over 3 years ago)
• Default Branch: next
• Last Pushed: 2021-07-28T09:18:12.000Z (over 3 years ago)
• Last Synced: 2024-11-06T18:08:24.449Z (9 days ago)
• Topics: case, component, default, preact, switch
• Language: JavaScript
• Homepage: https://npmjs.com/@aminnairi/preact-switch
• Size: 186 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# @aminnairi/preact-switch

[![NPM version](https://badgen.net/npm/v/@aminnairi/preact-switch)](https://www.npmjs.com/package/@aminnairi/preact-switch) [![Coverage Status](https://coveralls.io/repos/github/aminnairi/preact-switch/badge.svg?branch=latest)](https://coveralls.io/github/aminnairi/preact-switch?branch=latest) [![Number of vulnerabilities](https://badgen.net/snyk/aminnairi/preact-switch)](https://snyk.io/advisor/npm-package/@aminnairi/preact-switch) [![Size of the NPM package](https://badgen.net/bundlephobia/minzip/@aminnairi/preact-switch)](https://bundlephobia.com/package/@aminnairi/preact-switch) [![Tree shaking support](https://badgen.net/bundlephobia/tree-shaking/@aminnairi/preact-switch)](https://bundlephobia.com/package/@aminnairi/preact-switch)

## Requirements

- Node.js

- NPM

## Installation

```console

$ npm install @aminnairi/preact-switch

```

## Features

- Conditional rendering directly in JSX.

- No more messy brackets, ternary and short-circuit evaluation in JSX.

- Just like a switch in JavaScript.

- Strict runtime checking.

- No switch without case or default.

- No case nor default without children.

- Error thrown when used incorrectly and recoverable with [`useErrorBoundary`](https://preactjs.com/guide/v10/hooks/#useerrorboundary).

## Usage

### Basic

```jsx

import {h} from "preact";

import {Switch, Case, Default} from "@aminnairi/preact-switch";

const App = () => (

  

     target === "great"}>

      Glad you are doing great!

    

     target === "ok"}>

      I hope that everything is okay!

    

     target === "bad"}>

      Is there anything I can do for you?

    

    

      Have a great one!

    

  

);

export default App;

```

### Advanced

```jsx

import {h, Fragment} from "preact";

import {useState, useCallback, useErrorBoundary} from "preact/hooks";

import {Switch, Case, Default} from "@aminnairi/preact-switch";

const App = () => {

  const [error] = useErrorBoundary();

  const [mood, setMood] = useState("ok");

  const updateMood      = useCallback(({target: {value}}) => setMood(value), []);

  

  const isGreatMood = useCallback(target => target === "great", []);

  const isOkMood    = useCallback(target => target === "ok", []);

  const isBadMood   = useCallback(target => target === "bad", []);

  

  if (error) {

    return (

      

        
Error

        
An error occurred

        Reason: {error.message}

      

    );

  }


  return (

    

      

        Great

        Ok

        Bad

      

      

        

          Glad you are doing great!

        

        

          I hope that everything is okay!

        

        

          Is there anything I can do for you?

        

        

          Have a great one!

        

      

    

  );

};

export default App;

```

See [`examples`](https://github.com/aminnairi/preact-switch/tree/next/examples).

## Contributing

See [`CONTRIBUTING.md`](https://github.com/aminnairi/preact-switch/blob/next/CONTRIBUTING.md).

## License

See [`LICENSE`](https://github.com/aminnairi/preact-switch/blob/next/LICENSE).

## Changelog

See [`CHANGELOG.md`](https://github.com/aminnairi/preact-switch/blob/next/CHANGELOG.md).