Socket
Book a DemoInstallSign in
Socket

@yookue/react-condition

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@yookue/react-condition

Render components conditionally for react

0.2.1
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

@yookue/react-condition

NPM version Software License NPM downloads

🏅 Render components conditionally for React 👍

Features

✅ Supports 'If' conditions

✅ Supports 'If'-'Then' conditions

✅ Supports 'If'-'Else' conditions

✅ Supports 'If'-'Then'-Else' conditions

✅ Supports 'For' conditions

✅ Supports 'Do' conditions

✅ Supports 'While' conditions

✅ Supports 'MapIterator' conditions

✅ Supports 'SetIterator' conditions

✅ Supports 'ObjectIterator' conditions

Quickstart

You can install this package in your React project as follows:

$ npm install @yookue/react-condition --save

Then, you may import components as follows:

import {If, For, Switch, Do, While} from '@yookue/react-condition';
import {MapIterator, SetIterator, ObjectIterator} from '@yookue/react-condition';

Enjoy your coding journey with react-condition. ✌️

Example

If

Both of the If.Then and If.Else have a render property (() => React.ReactNode), thus you can customize the rendering contents instead of the React children.

If statement

import React from 'react';
import {If} from '@yookue/react-condition';

export default () => {
    const param = true;
    return (
        <If condition={param}>
            <span>Hello World</span>
        </If>
    );
}

If-Then statement

import React from 'react';
import {If} from '@yookue/react-condition';

export default () => {
    const param = 1;
    return (
        <If condition={param}>
            <If.Then>
                <span>Hello World</span>
            </If.Then>
        </If>
    );
}

If-Else statement

import React from 'react';
import {If} from '@yookue/react-condition';

export default () => {
    const param = false;
    return (
        <If condition={param}>
            <span>Hello World</span>
            <If.Else>
                <span>Hello Yookue</span>
            </If.Else>
        </If>
    );
}

If-Then-Else statement

import React from 'react';
import {If} from '@yookue/react-condition';

export default () => {
    const param = false;
    return (
        <If condition={param}>
            <If.Then>
                <span>Hello World</span>
            </If.Then>
            <If.Else>
                <span>Hello Yookue</span>
            </If.Else>
        </If>
    );
}

For statement

import React from 'react';
import {For} from '@yookue/react-condition';

export default () => {
    return (
        <For
            of={['foo', 'bar']}
            render={(item, index) => {
                return (
                    <span key={index}>Hello, {item}</span>
                );
            }}
        />
    );
}

Switch statement

Both of the Switch.Case and Switch.Default have a render property (() => React.ReactNode), thus you can customize the rendering contents instead of the React children.

import React from 'react';
import {Switch} from '@yookue/react-condition';

export default () => {
    const username = 'admin';

    return (
        <Switch>
            <Switch.Case condition={username.includes('admin')}>
                <span>admin</span>
            </Switch.Case>
            <Switch.Case condition={username.includes('guest')}>
                <span>guest</span>
            </Switch.Case>
            <Switch.Default>
                <span>root</span>
            </Switch.Default>
        </Switch>
    );
}

Do statement

import React from 'react';
import {Do} from '@yookue/react-condition';

export default () => {
    let param = 0;
    return (
        <Do
            condition={() => {
                return param < 2;
            }}
            render={(index) => {
                param++;
                return (
                    <span key={index}>Hello, {index}</span>
                );
            }}
        />
    );
}

While statement

import React from 'react';
import {While} from '@yookue/react-condition';

export default () => {
    let param = 0;
    return (
        <While
            condition={() => {
                return param++ < 2;
            }}
            render={(index) => {
                return (
                    <span key={index}>Hello, {index}</span>
                );
            }}
        />
    );
}

MapIterator statement

import React from 'react';
import {MapIterator} from '@yookue/react-condition';

export default () => {
    const map = new Map([
        ['foo', 'bar'],
        ['hello', 'world'],
    ]);
    return (
        <MapIterator
            of={map}
            render={(value, key, index) => {
                return (
                    <span key={index}>Hooray, {key}-{value}</span>
                );
            }}
        />
    );
}

SetIterator statement

import React from 'react';
import {SetIterator} from '@yookue/react-condition';

export default () => {
    const set = new Set<string>([
        'foo-bar',
        'hello-world',
    ]);
    return (
        <SetIterator
            of={set}
            render={(item, index) => {
                return (
                    <span key={index}>Hooray, {item}</span>
                );
            }}
        />
    );
}

ObjectIterator statement

import React from 'react';
import {ObjectIterator} from '@yookue/react-condition';

export default () => {
    const param = {
        'foo': 'bar',
        'hello': 'world',
    };
    return (
        <ObjectIterator
            of={param}
            render={(value, key, index) => {
                return (
                    <span key={index}>Hooray, {key}-{value}</span>
                );
            }}
        />
    );
}

License

This project is under the MIT License.

Beijing Yookue Network Technology Ltd.

Website

  • Yookue: https://yookue.com

Keywords

react-condition

FAQs

Package last updated on 07 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.