Qwik Control Flow Components

Use semantic control flow components in your Qwik app.

Table of Contents

• Installation
• Configuration
• Usage
• Contributing
• Code Of Conduct
• Contributors
• Related Links
• License

Installation

npm install -D @qwikifers/qwik-flow

Usage

If component.

import { If } from '@qwikifers/qwik-flow';

const toogle = useSignal<boolean>(false);

<If condition={toogle.value}>
  {() => <Info message="Lorem ipsum dolores avec mi" />}
</If>

For component:

import { For } from '@qwikifers/qwik-flow';

<For each={people.value} fallback={() => (<div>No data found</div>)}>
  {(item, key) => <Card key={key} data={item} />}
</For>

Switch/Case components for more complex rendering logic.

import { Switch, Case } from '@qwikifers/qwik-flow';

const option = useSignal<string>('1');

<Switch default={() => <div>Invalid option</div>}>
  <Case when={option.value === '1'}>
    {() => <p>selected: 1 - Car</p>}
  </Case>
  <Case when={option.value === '2'}>
    {() => <p>selected: 2 - Airplane</p>}
  </Case>
  <Case when={option.value === '3'}>
    {() => <p>selected: 3 - Train</p>}
  </Case>
</Switch>

Contributing

Want to contribute? Yayy! 🎉

Please read and follow our Contributing Guidelines to learn what are the right steps to take before contributing your time, effort and code.

Thanks 🙏

Code Of Conduct

Be kind to each other and please read our code of conduct.

This project follows the all-contributors specification. Contributions of any kind welcome!

Related Links

• qwik-flow Discord
• Qwik Discord
• Qwik Docs

License

MIT