Support React 19

[osdiab]

NextJS 15 RC just released which requires react 19.

• loosen peer dependency versions to allow it
• check that the library still works as expected with React 19

thanks!

[ZeeCoder]

Can't promise you anything, but with a little luck I might get to it this weekend. We'll see.

…

On Fri, 24 May 2024 at 06:22, Omar Diab ***@***.***> wrote: NextJS 15 RC just released which requires react 19. - loosen peer dependency versions to allow it - check that the library still works as expected with React 19 thanks! — Reply to this email directly, view it on GitHub <#108>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4CKESWA2S6UTH5P5KBPN3ZD26AHAVCNFSM6AAAAABIG2PYG6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGMYTIMZRGE4DSMI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[ZeeCoder]

I'll wait for a stable release actually.

…

On Fri, 24 May 2024 at 08:31, Viktor Hubert ***@***.***> wrote: Can't promise you anything, but with a little luck I might get to it this weekend. We'll see. On Fri, 24 May 2024 at 06:22, Omar Diab ***@***.***> wrote: > NextJS 15 RC just released which requires react 19. > > - loosen peer dependency versions to allow it > - check that the library still works as expected with React 19 > > thanks! > > — > Reply to this email directly, view it on GitHub > <#108>, or > unsubscribe > <https://github.com/notifications/unsubscribe-auth/AA4CKESWA2S6UTH5P5KBPN3ZD26AHAVCNFSM6AAAAABIG2PYG6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGMYTIMZRGE4DSMI> > . > You are receiving this because you are subscribed to this thread.Message > ID: ***@***.***> >

[osdiab]

Next 15 just got released as stable and ready for production, and it depends on React 19 which is still release candidate; upon upgrading I found that the typings for the ref prop are failing because of some upstream changes in React typing; this library wants a RefObject<Element> rather than RefObject<Element | null> so if you call useRef() and give it null as a default before the ref is initialized, that ref cannot be passed.

Haven't tested if anything else fails to work.

[ZeeCoder]

Yeah seems like an easy enough fix. The majority of the work might just be around fixing the type and adding React 19 tests. Otherwise the code might just work already as-is.

…

On Tue, Oct 29, 2024, 07:35 Omar Diab ***@***.***> wrote: Next 15 just got released as stable and ready for production <https://nextjs.org/blog/next-15>, and it depends on React 19 which is still release candidate; upon upgrading I found that the typings for the ref prop are failing because of some upstream changes in React typing; this library wants a RefObject<Element> rather than RefObject<Element | null> so if you call useRef() and give it null as a default before the ref is initialized, that ref cannot be passed. Haven't tested if anything else fails to work. — Reply to this email directly, view it on GitHub <#108 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4CKEU3PRAZVVR2WICX3ITZ54UCBAVCNFSM6AAAAABIG2PYG6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBTGMZDONRZGE> . You are receiving this because you commented.Message ID: ***@***.***>

[sacru2red]

React 19 is now stable!

[ZeeCoder]

Fantastic!

Unfortunately I don't have enough time to make a proper release right now.

The test suite needs upgrading so that it could run both 18 and 19, types changed significantly as well, and my gut feel is that the tests will yield some issues.

[kamyarkaviani]

@ZeeCoder please do keep us updated with any ETA as to when we can expect react 19 support here.

[ZeeCoder]

I'll probably post in this PR as I go: #114

[sauron918]

Is there hope for an update in the near future?

[monolithed]

A native implementation comes out of the box:

import React, {
    useState,
    useCallback,
    useEffect
} from 'react';

const useSize = <T extends React.RefObject<HTMLDivElement | null>>(target: T) => {
    const [size, setSize] = useState<DOMRect>();

    const updateSize = useCallback(() => {
        if (target.current) {
            const size = target.current.getBoundingClientRect();

            setSize(size);
        }
    }, [target]);

    useEffect(() => {
        const {current} = target;

        updateSize();

        const observer = new ResizeObserver((entries) => {
            if (entries.length > 0) {
                updateSize();
            }
        });

        if (current) {
            observer.observe(current);
        }

        return () => {
            if (current) {
                observer.unobserve(current);
            }

            observer.disconnect();
        };
    }, [target, updateSize]);

    return size;
};

export {useSize};

const target = useRef<HTMLDivElement>(null);
const size = useSize(target); // size.width

[jp1357]

A native implementation comes out of the box:

import React, {
useState,
useCallback,
useEffect
} from 'react';

const useSize = <T extends React.RefObject<HTMLDivElement | null>>(target: T) => {
const [size, setSize] = useState();

const updateSize = useCallback(() => {
    if (target.current) {
        const size = target.current.getBoundingClientRect();

        setSize(size);
    }
}, [target]);

useEffect(() => {
    const {current} = target;

    updateSize();

    const observer = new ResizeObserver((entries) => {
        if (entries.length > 0) {
            updateSize();
        }
    });

    if (current) {
        observer.observe(current);
    }

    return () => {
        if (current) {
            observer.unobserve(current);
        }

        observer.disconnect();
    };
}, [target, updateSize]);

return size;

};

export {useSize};

const target = useRef(null);
const size = useSize(target); // size.width

Thanks. Seems to work good (y)

[m10]

A native implementation comes out of the box:

import React, {
useState,
useCallback,
useEffect
} from 'react';

const useSize = <T extends React.RefObject<HTMLDivElement | null>>(target: T) => {
const [size, setSize] = useState();

const updateSize = useCallback(() => {
    if (target.current) {
        const size = target.current.getBoundingClientRect();

        setSize(size);
    }
}, [target]);

useEffect(() => {
    const {current} = target;

    updateSize();

    const observer = new ResizeObserver((entries) => {
        if (entries.length > 0) {
            updateSize();
        }
    });

    if (current) {
        observer.observe(current);
    }

    return () => {
        if (current) {
            observer.unobserve(current);
        }

        observer.disconnect();
    };
}, [target, updateSize]);

return size;

};

export {useSize};

const target = useRef(null);
const size = useSize(target); // size.width

this will break if the ref gets updated. using refs as hook dependency is brittle.