Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
control-statements
Advanced tools
Readme
There's no built-in looping and conditional syntax in React. This library adds the syntactic sugar to write looping and conditionals as component.
Fork of react control statements but with <React.Fragment/>
implementation
If you are coming from non-jsx background you might think this package is a good start but in reality 🤫 this package is not needed at all.
because, it's easy to replicate this scenarios with pure ES6+, I'm putting some examples that might help you for getting started.
import React from "react";
export default function PureReactExamples() {
const foo = true;
const fruits = ["🍇 Grapes", "🍈 Melon", "🍌 Banana"];
return (
<>
<h1>Simple If without Else</h1>
{foo && <p>Yay, Foo is true</p>}
<h1>Simple If with Else</h1>
{foo ? <p>Yay, Foo is true</p> : <p>Whoa, Foo is false</p>}
<h1>Loop Example</h1>
{fruits.map((fruitName, index) => (
<p key={index}>{fruitName}</p>
))}
</>
);
}
npm install --save control-statements
The body of the if statement only gets evaluated if condition is true.
import React, { Component } from "react";
import { If } from "control-statements";
class YourComponent extends Component {
render() {
<If condition={test}>
<span>Truth</span>
</If>;
}
}
This is an alternative syntax for more complex conditional statements.
import React, { Component } from "react";
import { Choose, When, Otherwise } from "control-statements";
class YourComponent extends Component {
render() {
return (
<div>
<Choose>
<When condition={test1}>
<span>IfBlock</span>
</When>
<When condition={test2}>
<span>ElseIfBlock</span>
<span>Another ElseIfBlock</span>
<span>...</span>
</When>
<Otherwise>
<span>ElseBlock</span>
</Otherwise>
</Choose>
</div>
);
}
}
For syntax.
import React, { Component } from "react";
import { For } from "control-statements";
class YourComponent extends Component {
render() {
return (
<div>
<For each="$item" of={this.props.items}>
<span key="$item.id">$item.title</span>
</For>
</div>
);
}
}
FAQs
Neater control statements (if/for) for react, as a component
The npm package control-statements receives a total of 20 weekly downloads. As such, control-statements popularity was classified as not popular.
We found that control-statements demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.