Fix useSlot

Correctly regenerates the reference

update only for [email protected]

3.49.0

update only for [email protected]

Improved typing for useSlot and useProxySlot

Atomico components do not require the use of InstanceType for useSlot and useProxySlot

Before

const myElements = useSlot<InstanceType<typeof MyElement>>(ref);

After

const myElements = useSlot<typeof MyElement>(ref);

new parameter for useSlot

useSlot

useSlot is a really useful hook since it allows us to capture the ChildNodes associated with the slot, sometimes we filter these nodes on the return of this hook, to improve the performance of useSlot we have added a second parameter that will only be called if the slots change, this second parameter has the purpose of filtering the ChildNodes, example:

const InputElements = useSlot<HTMLInputElement>(refSlot, (node)=>node instanceof HTMLInputElement );

fix for export types for TS

The Ts configuration had ignored subpaths to generate class type declarations.

add useDragResize hook

useDragResize

allows to capture the drag and drop of an element in order to execute its resizing, the return of X and Y corresponds to the percentage of the cartesian quadrant coordinate 4, (0...1, 0...1)

Module

import { useDragResize } from "@atomico/hooks/use-drag-resize";

Syntax

const ref = useRef();
const optionalInitialState= [ 1, 1]; // X, Y;
const [ isDragging, Xcoordinate, Ycoordinate ] = useDragResize(ref,optionalInitialState);

Resets the coordinate to the observed frequency

This modification alters the return of x and y, depending on the reference to be observed as a container.

Update @atomico/exports and add use-parallax

Update @atomico/exports

Before the @atomico/exports configuration did not generate compilation of the files, since the code of atomico/hooks was only JS, now the compilation step has been added to allow the use of TS, this does not generate side effects if your project export the hooks according to the package.json#exports.

use-parallax

returns the mouse coordinates based on a 4 quadrant cartesian plane, this allows to achieve mouse position sensitive effects, this hook is optimized to work only if the hook is intercepted.

const { x, y } = useParallax(refHost);

where:

1. refHost: reference to the container to observe the movement of the mouse
2. { x, y }: coordinates, from 0 to 1 according to the location of the Cartesian quadrant

fix use-responsive-state allowing regenerate state

3.43.1

fix use-responsive-state

enhancement for useRedirect

Now the target attribute, allows useRedirect to ignore the redirect.