condition-component
v0.1.0
Published
A React-based package that provides components to replace traditional `if-else` and `switch-case` statements also array method `filter` and `map`, making conditional rendering easier and cleaner in your React applications.
Downloads
27
Maintainers
Readme
condition-component
A React-based package that provides components to replace traditional if-else
and switch-case
statements, making conditional rendering easier and cleaner in your React applications.
Installation
You can install the package via npm or yarn:
npm
npm install condition-component
yarn
yarn add condition-component
Features
- Replace
if-else
: Use React components to handle conditions in JSX instead of writing logic blocks in JavaScript. - Replace
switch-case
: Simplify complex conditional rendering by avoidingswitch-case
statements. - Replace
array methods
: Makemap
,filter
(and more in the future) more readable avoiding javascript code inside render statements. - Readable and Reusable: Enhance code readability and reusability through a component-driven approach.
- Modular and Clean: Keep your conditional logic modular and easy to maintain.
Usage
Here's how you can use this package in your React project:
Example 1: Replacing if-else
Instead of writing conditional logic like this:
if (condition) {
return <ComponentA />;
} else {
return <ComponentB />;
}
You can use the package like this:
import { Condition, If, Else } from "condition-component";
<Condition>
<If condition={condition}>
<ComponentA />
</If>
<Else>
<ComponentB />
</Else>
</Condition>;
Example 2: Replacing if-elseif-else
Instead of writing conditional logic like this:
if (condition) {
return <ComponentA />;
} else if (condition2) {
return <ComponentB />;
} else {
return <ComponentC />;
}
You can use the package like this:
import { Condition, If, ElseIf, Else } from "condition-component";
<Condition>
<If condition={condition}>
<ComponentA />
</If>
<ElseIf condition={condition2}>
<ComponentB />
</ElseIf>
<Else>
<ComponentB />
</Else>
</Condition>;
Example 3: Replacing switch-case
import { Switch, Case, Default } from "condition-component";
<Switch value={value}>
<Case value="option1">
<Component1 />
</Case>
<Case value="option2">
<Component2 />
</Case>
<Default>
<DefaultComponent />
</Default>
</Switch>;
Example 4: Replacing map
and filter
import { Chain, Map, Filter } from "condition-component";
<Chain data={your_array_data}>
<Filter>{(item) => condition}</Filter>
<Map>{(item) => <p>{item}</p>}</Map>
</Chain>;
And also, you can use Map alone:
import { Map } from "condition-component";
<Map>{(item) => <p>{item}</p>}</Map>;
Contributing
We welcome contributions! Please submit a pull request or open an issue if you find a bug or have a suggestion for improvement.
Contact me:
- https://portfolio-vietanhle.vercel.app/
- [email protected]
License
This project is licensed under the MIT License - see the LICENSE file for details.
This template should cover all essential aspects of a README.md
file, including installation instructions, usage examples, API documentation, and contribution guidelines. Make sure to replace condition-component
and other placeholders with the actual details of your package!