How to use the react-hanger.useNumber function in react-hanger
To help you get started, we’ve selected a few react-hanger examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
kitze / twizzle-landing / src / components / DownloadModal / index.js View on Github 
const DownloadModal = ({ onClose }) => {
const email = useInput('');
const loading = useBoolean(false);
const clickedDownload = useBoolean(false);
const isInputValid = email.hasValue && isemail.validate(email.value, { minDomainAtoms: 2 });
const privacy = useBoolean(false);
const subscribed = useBoolean(false);
const countdown = useNumber(5);
const step = useNumber(0);
const onSubscribe = async () => {
loading.setTrue();
try {
await subscribeUser(email.value);
loading.setFalse();
subscribed.setTrue();
} catch (err) {
loading.setFalse();
alert(`Couldn't subscribe. Error: ${err.toString()}`);
console.error(err);
}
};
const checked = privacy.value === true;const DownloadModal = ({ onClose }) => {
const email = useInput('');
const loading = useBoolean(false);
const clickedDownload = useBoolean(false);
const isInputValid = email.hasValue && isemail.validate(email.value, { minDomainAtoms: 2 });
const privacy = useBoolean(false);
const subscribed = useBoolean(false);
const countdown = useNumber(5);
const step = useNumber(0);
const onSubscribe = async () => {
loading.setTrue();
try {
await subscribeUser(email.value);
loading.setFalse();
subscribed.setTrue();
} catch (err) {
loading.setFalse();
alert(`Couldn't subscribe. Error: ${err.toString()}`);
console.error(err);
}
};const App = () => {
const newTodo = useInput('');
const showCounter = useBoolean(true);
const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
const rotatingNumber = useNumber(0, {
lowerLimit: 0,
upperLimit: 4,
loop: true,
});
const counter = useNumber(0);
const todos = useArray(['hi there', 'sup', 'world']);
return (
<div style="{{">
<h3>Counter</h3>
<button type="button">
{' '}
toggle counter{' '}
</button>
{showCounter.value && }</div>const App = () => {
const newTodo = useInput('');
const showCounter = useBoolean(true);
const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
const rotatingNumber = useNumber(0, {
lowerLimit: 0,
upperLimit: 4,
loop: true,
});
const counter = useNumber(0);
const todos = useArray(['hi there', 'sup', 'world']);
return (
<div style="{{">
<h3>Counter</h3>
<button type="button">
{' '}
toggle counter{' '}
</button>
{showCounter.value && }
<h3>Limited number</h3></div>const App = () => {
const newTodo = useInput('');
const showCounter = useBoolean(true);
const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
const rotatingNumber = useNumber(0, {
lowerLimit: 0,
upperLimit: 4,
loop: true,
});
const counter = useNumber(0);
const todos = useArray(['hi there', 'sup', 'world']);
return (
<div style="{{">
<h3>Counter</h3>
<button type="button">
{' '}
toggle counter{' '}
</button>
{showCounter.value && }
<h3>Limited number</h3>
<div>
{'This number will stop increasing/decreasing when it reaches the "lowerLimit" or the "upperLimit"'}
</div>
<br>
<button type="button"> limitedNumber.increase()}></button></div>react-hanger
Set of a helpful hooks, for different specific to some primitives types state changing helpers
