1.0.2 ā€¢ Published 3 months ago

@anissoft/react-conditions v1.0.2

Weekly downloads
2
License
MIT
Repository
github
Last release
3 months ago

Welcome to @anissoft/react-conditions šŸ‘‹

Helpers for conditional rendering in React

Installation

Just run npm install command:

$ npm install @anissoft/react-conditions

Components:

- \<If condition />

import * as React from 'react';
import { render } from 'react-dom';
import { If, Then, Else } from '@anissoft/react-conditions/If'

import MainApp from 'Components/Main';
import Error from 'Components/Error';

...

render(
  <div>
    <If condition={!isErrored}>
      <Then>
        <MainApp/>
      </Then>
      <Else>
        <Error/>
      </Else>
    </If>
  </div>,
  document.getElementById('app-root'),
);

also, there is a shortener for case without else:

<div>
  <If condition={!isErrored}>
    <MainApp />
  </If>
</div>

Then and Else can receive a callbacks as children - that allows you to safely use inside them methods, props and variables

  <div>
    <If condition={!!foo} >
      <Then>
        {() => <p>{`Here some value for you ${foo.bar()}`}</p>}
      </Then>
    </If>
  </div>
}

- \<Wrapper condition />

Conditional render like in < If />, but this time for wrapping components

import * as React from 'react';
import { render } from 'react-dom';
import { Wrapper } from '@anissoft/react-conditions/Wrapper'

import MainApp from 'Components/Main';
import MobleViewWrapper from 'Components/Mobile';

...

render(
  <div>
    <Wrapper condition={isMobile} wrapper={MobleViewWrapper}>
      <MainApp/>
    </Wrapper>
  </div>,
  document.getElementById('app-root'),
);

also, can be used with function wrap as wrapper

import * as React from 'react';
import { render } from 'react-dom';
import { Wrapper } from '@anissoft/react-conditions/Wrapper'

import MainApp from 'Components/Main';
import MobleViewWrapper from 'Components/Mobile';

...
const wrapIn = (children) => {
  ...
  return <MobleViewWrapper>{children}</MobleViewWrapper>
}

render(
  <div>
    <Wrapper condition={isMobile} wrap={wrapIn}>
      <MainApp/>
    </Wrapper>
  </div>,
  document.getElementById('app-root'),
);

- \

Conditional render, but for several conditions. Simple implementation of javascript switch

import * as React from 'react';
import { render } from 'react-dom';
import { Switch, Case, Default } from '@anissoft/react-conditions/Switch'

import AdminView from 'Components/Admin';
import UserView from 'Components/User';
import DefaultView from 'Components/Default';

...

render(
  <div>
    <Switch>
      <Case condition={ userRole === 'admin' }>
        <AdminView />
      </Case>
      <Case condition={ userRole === 'regular' }>
        <UserView />
      </Case>
      <Default>
        <DefaultView />
      </Default>
    </Switch>
  </div>,
  document.getElementById('app-root'),
);

Can render several positive cases

render(
  <div>
    <Switch>
      <Case condition={userRoles.includes("admin")}>
        <AdminView />
      </Case>
      <Case condition={userRole.includes("regular")}>
        <UserView />
      </Case>
      <Default>
        <DefaultView />
      </Default>
    </Switch>
  </div>,
  document.getElementById("app-root")
);

Author

šŸ‘¤ anissoftkun@gmail.com

šŸ¤ Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ā­ļø if this project helped you!

1.0.2

3 months ago

1.0.1

1 year ago

1.0.0

1 year ago

0.0.3

2 years ago

0.0.2

2 years ago