
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@hpe/react-hooks
Advanced tools
A set of reusable React hooks to use in your React >= v16.8.0 projects. To install the reusable hooks package run the following command in your project directory.
npm install -D @hpe/react-hooks
or yarn add @hpe/react-hooks
A set of hooks for fetching asynconchronus data. Uses isomorphic-fetch
to allow for server-side rendering. Here's how to use this hook in your React project.
import { useFetcher } from '@hpe/react-hooks';
const [data, loading, error] = useFetcher('https://myapi/data');
. When data
is available it will return a json parsed object, loading
returns a boolean to allow a loading state while error
will provide any request errors the hook encountered.useFetcher
accepts a second parameter to accomplish more customized requests, the second parameter behaves exactly a standard fetch
call. More information can be found in the fetch spec.
Below is an example React component using the useFetcher
hook.
import React from 'react';
import { useFetcher } from '@hpe/react-hooks';
function App() {
const [data, loading, error] = useFetcher(
'https://api.openweathermap.org/data/2.5/weather?zip=27278&appid=18ef348ece45174572c5e3d4be8a8d69&units=imperial',
);
return (
<div>
{loading && <div>Loading...</div>}
{error && (
<div>
This error happened:{' '}
<span style={{ background: '#d14545', padding: '2px 5px' }}>
{error.toString()}
</span>
</div>
)}
{data && (
<div>
{data.name} is {data.main.temp} degrees.
</div>
)}
</div>
);
}
export default App;
A hook for observing when a DOM node or nodes enters or leaves a browser viewport. useIntersection
accepts all parameters which the Intersection Observer API spec accepts including root
, rootMargin
, and threshold
.
Note: this feature is not IE11 compatible without a polyfill
Below is an example React application using the useIntersection
hook.
import React from 'react';
import { useIntersection } from '@hpe/react-hooks';
function App() {
const [thingToWatch, entry] = useIntersection();
const isVisible = entry.isIntersecting;
return (
<div>
<div style={{ height: '100vh' }} />
<div ref={thingToWatch}>
<h1
style={{
opacity: isVisible ? 1 : 0,
transition: 'opacity 1s ease-in',
}}
>
Im now in view{' '}
<span role="img" aria-label="eyes looking around">
👀
</span>
</h1>
</div>
<div style={{ height: '100vh' }} />
</div>
);
}
A hook to gain insights on an element's position in the browser viewport. The useEntryPosition
returns three array items. The first is your ref to a component in the example we use boxPosToWatch
. The second is an object containing elementIs
and direction
. direction
refers to the direction the user is scrolling and will return either up
or down
. elementIs
returns the element's position in relation to the view port, its return strings are leaving
, entering
, or visible
. visible
simply means the element is fully contained within the user's viewport. The third item being returned in the callback is entryObserver
, this is an intersection observer on your ref. This observer can be used to extend the functionality of the position hook and will allow the developer to be very creative in what is possible with this hook.
Here is an example using the useEntryPosition
hook:
import React from 'react';
import { useEntryPosition } from '@hpe/react-hooks';
const Space = () => (
<div /* The final frontier */ style={{ height: '101vh' }} />
);
function App() {
const [boxPosToWatch, { direction, elementIs }] = useEntryPosition();
return (
<div>
<Space />
<div
ref={boxPosToWatch}
style={{
display: 'inline-block',
padding: '20px',
border: `${elementIs === 'visible' ? 'green' : 'red'} 3px solid`,
transition: 'border-color 1s linear',
}}
>
<h1>
You are scrolling {direction} {direction === 'up' ? '⬆️' : '⬇️️'}{' '}
while
<br />
element is <u>{elementIs}</u> in the window.
</h1>
</div>
<Space />
</div>
);
}
FAQs
Reusable react hooks.
The npm package @hpe/react-hooks receives a total of 1 weekly downloads. As such, @hpe/react-hooks popularity was classified as not popular.
We found that @hpe/react-hooks demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.