Burokku

A lightweight tool for conditionally rendering React components.

Install

npm install --save burokku

without Burokku

 const [loggedIn, setLoggedIn] = useState(false)

 const App = () => {

  // conditional rendering
   return (
     {loggedIn ? 'user logged in' : "user not logged in"}
   )
 }

with Burokku

import { If, Then, Else } from 'burokku'
const [loggedIn, setLoggedIn] = useState(false)

// cleaner conditional rendering
function App() {
  return (
    <If condition={loggedIn}>
        <Then>
          <span>Yes, user logged in.</span>
        </Then>
        <Else>
          <span>Sorry, user is not logged in.</span>
        </Else>
    </If>
  )
} 

More from Burokku

Match

import { Match, Case, DefaultCase } from 'burokku'
const [age, setAge] = useState(20)

function App() {
  return (
    <Match>
        <Case condition={age === 20}>
            <span>Age equals 20</span>
        </Case>
        <Case condition={age < 50}>
            <span>Age is less 50</span>
        </Case>
        <Case condition={age > 5}>
            <span>Age is greater 5</span>
        </Case>
        <DefaultCase>
            <span>i will render if all cases conditions are false</span>
        </DefaultCase>
    </Match>
  )
} 

Show

import { Show } from 'burokku'
const [loggedIn, setLoggedIn] = useState(false)

function App() {

  // solidjs like SHOW 
  return (
    <Show 
    condition={loggedIn} 
    fallback={<p>hello, click here to login</p>}>
        <div>You are logged In, click here to logout</div>
    </Show>
  )
} 

License

MIT