https://github.com/zediculz/burokku

A lightweight tool for conditionally rendering React component
https://github.com/zediculz/burokku

components control-flow if-else react rendering

Last synced: 5 months ago
JSON representation

A lightweight tool for conditionally rendering React component

• Host: GitHub
• URL: https://github.com/zediculz/burokku
• Owner: zediculz
• Created: 2023-09-05T14:31:37.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2025-07-11T06:40:03.000Z (6 months ago)
• Last Synced: 2025-07-11T10:26:19.579Z (6 months ago)
• Topics: components, control-flow, if-else, react, rendering
• Language: JavaScript
• Homepage:
• Size: 1.95 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 58
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

# Burokku

A lightweight tool for conditionally rendering React components.

## Install

```bash

npm install --save burokku

```

### without Burokku

```jsx

 const [loggedIn, setLoggedIn] = useState(false)

 const App = () => {

  // conditional rendering

   return (

     {loggedIn ? 'user logged in' : "user not logged in"}

   )

 }

```

### with Burokku

```jsx

import { If, Then, Else } from 'burokku'

const [loggedIn, setLoggedIn] = useState(false)

// cleaner conditional rendering

function App() {

  return (

    

        

          Yes, user logged in.

        

        

          Sorry, user is not logged in.

        

    

  )

} 

```

## More from Burokku

#### Match

```javascript

import { Match, Case, DefaultCase } from 'burokku'

const [age, setAge] = useState(20)

function App() {

  return (

    

        

            Age equals 20

        

        

            Age is less 50

        

         5}>

            Age is greater 5

        

        

            i will render if all cases conditions are false

        

    

  )

} 

```

#### Show

```javascript

import { Show } from 'burokku'

const [loggedIn, setLoggedIn] = useState(false)

function App() {

  // solidjs like SHOW 

  return (

    hello, click here to login}>

        
You are logged In, click here to logout

    

  )

} 


```

## License

MIT

[![NPM](https://img.shields.io/npm/v/burokku.svg)](https://www.npmjs.com/package/burokku)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Contact](https://img.shields.io/badge/contact-@zediculz-blue.svg?style=flat&logo=twitter)](https://twitter.com/zediculz)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/burokku?label=bundle%20size&logo=webpack)](https://bundlephobia.com/result?p=burokku)