![Malicious PyPI Package ‘pycord-self’ Targets Discord Developers with Token Theft and Backdoor Exploit](https://cdn.sanity.io/images/cgdhsj6q/production/87f552a1c62a48cf417637353ef8469746624a66-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious PyPI Package ‘pycord-self’ Targets Discord Developers with Token Theft and Backdoor Exploit
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
react-hanger
Advanced tools
Set of a helpful hooks, for different specific to some primitives types state changing helpers
Set of a helpful hooks, for different specific to some primitives types state changing helpers.
Thanks goes to these wonderful people (emoji key):
Andrey Los 🤔 🚇 ⚠️ 💻 | Praneet Rohida 🚇 ⚠️ 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Has two APIs:
const { value, toggle } = useBoolean(false)
(Docs below)useState
with array destructuring
const [value, actions] = useBoolean(false)
(Docs)yarn add react-hanger
import React, { Component } from 'react';
import { useInput, useBoolean, useNumber, useArray, useOnMount, useOnUnmount } from 'react-hanger';
const App = () => {
const newTodo = useInput('');
const showCounter = useBoolean(true);
const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
const counter = useNumber(0);
const todos = useArray(['hi there', 'sup', 'world']);
const rotatingNumber = useNumber(0, {
lowerLimit: 0,
upperLimit: 4,
loop: true,
});
return (
<div>
<button onClick={showCounter.toggle}> toggle counter </button>
<button onClick={() => counter.increase()}> increase </button>
{showCounter.value && <span> {counter.value} </span>}
<button onClick={() => counter.decrease()}> decrease </button>
<button onClick={todos.clear}> clear todos </button>
<input type="text" value={newTodo.value} onChange={newTodo.onChange} />
</div>
);
};
import { useBoolean } from 'react-hanger' // will import all of functions
import useBoolean from 'react-hanger/useBoolean' // will import only this function
Just an alternative syntax to useState
, because it doesn't need array destructuring.
It returns an object with value
and a setValue
method.
const username = useStateful('test');
username.setValue('tom');
console.log(username.value);
const showCounter = useBoolean(true);
Methods:
toggle
setTrue
setFalse
const counter = useNumber(0);
const limitedNumber = useNumber(3, { upperLimit: 5, lowerLimit: 3 });
const rotatingNumber = useNumber(0, {
upperLimit: 5,
lowerLimit: 0,
loop: true,
});
Methods:
Both increase
and decrease
take an optional amount
argument which is 1 by default, and will override the step
property if it's used in the options.
increase(amount = 1)
decrease(amount = 1 )
Options:
lowerLimit
upperLimit
loop
step
- sets the increase/decrease amount of the number upfront, but it can still be overriden by number.increase(3)
or number.decrease(5)
const newTodo = useInput('');
<input value={newTodo.value} onChange={newTodo.onChange} />
<input {...newTodo.eventBind} />
<Slider {...newTodo.valueBind} />
Methods:
clear
onChange
eventBind
- binds the value
and onChange
props to an input that has e.target.value
valueBind
- binds the value
and onChange
props to an input that's using only value
in onChange
(like most external components)Properties:
hasValue
const todos = useArray([]);
Methods:
push
- similar to native doesn't return length thounshift
- similar to native doesn't return length thopop
- similar to native doesn't return element thoshift
- similar to native doesn't return element thoclear
removeIndex
removeById
- if array consists of objects with some specific id
that you pass
all of them will be removedmodifyById
- if array consists of objects with some specific id
that you pass
these elements will be modified.move
- moves item from position to position shifting other elements. So if input is [1, 2, 3, 4, 5]
from | to | expected
3 | 0 | [4, 1, 2, 3, 5]
-1 | 0 | [5, 1, 2, 3, 4]
1 | -2 | [1, 3, 4, 2, 5]
-3 | -4 | [1, 3, 2, 4, 5]
const { value, set } = useMap([['key', 'value']]);
const { value: anotherValue, remove } = useMap(new Map([['key', 'value']]));
Actions:
set
delete
clear
initialize
- applies tuples or map instancessetValue
const set = useSet(new Set<number>([1, 2]));
const { state, setState, resetState } = useSetState({ loading: false });
setState({ loading: true, data: [1, 2, 3] });
resetState();
Methods:
setState(value)
- will merge the value
with the current state
(like this.setState works in React)resetState()
- will reset the current state
to the value
which you pass to the useSetState
hookProperties:
state
- the current stateUse it to get the previous value of a prop or a state value. It's from the official React Docs. It might come out of the box in the future.
const Counter = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return (
<h1>
Now: {count}, before: {prevCount}
</h1>
);
};
const isPageLoaded = usePageLoad();
const { ready, error } = useScript({
src: 'https://example.com/script.js',
startLoading: true,
delay: 100,
onReady: () => {
console.log('Ready');
},
onError: (error) => {
console.log('Error loading script ', error);
},
});
const isDocumentReady = useDocumentReady();
useGoogleAnalytics({
id: googleAnalyticsId,
startLoading: true,
delay: 500,
});
const { width, height } = useWindowSize();
const done = useDelay(1000);
const tokenValue = usePersist('auth-token', 'value');
useToggleBodyClass(true, 'dark-mode');
useOnClick((event) => {
console.log('Click event fired: ', event);
});
// Pass ref to the element
const containerRef = useOnClickOutside(() => {
console.log('Clicked outside container');
});
// pass ref to the element
// call focusElement to focus the element
const [elementRef, focusElement] = useFocus();
const { imageVisible, bindToImage } = useImage(src, onLoad, onError);
useOnMount
, useOnUnmount
and useLifecycleHooks
with useEffect
.
This:useOnMount(() => console.log("I'm mounted!"));
useOnUnmount(() => console.log("I'm unmounted"));
// OR
useLifecycleHooks({
onMount: () => console.log("I'm mounted!"),
onUnmount: () => console.log("I'm unmounted!"),
});
to:
useEffect(() => {
console.log("I'm mounted!");
return () => console.log("I'm unmounted");
}, []);
bind
and bindToInput
are got renamed to valueBind
and eventBind
respectively on useInput
hookFAQs
Set of a helpful hooks, for different specific to some primitives types state changing helpers
The npm package react-hanger receives a total of 4,224 weekly downloads. As such, react-hanger popularity was classified as popular.
We found that react-hanger demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.