Support react 18

[Irik08]

library is incompatible with react 18

[Irik08]

It worked fine for the first render. But after click by dropdown cell application crashes with error.

Uncaught TypeError: Cannot read properties of undefined (reading 'scrollableElement')

[MichaelMatejko]

Hi Irik! Currently I am re-designing the componet to make it slicker and more robust I'd be glad to hear about your feedback. Wanna join our Discord? https://discord.gg/XMHJrDGp

[MarcoDeJong]

@MichaelMatejko That is not really an answer to the question ;)

Will React18 still be supported by the current component? Or is it on the roadmap for you, when re-designing the component as a whole? If so, what is the timeframe you expect? Need help?

[FlorianCassayre]

Hi, do you have any updates on this ticket? This currently prevents our project from upgrading to React 18. Thanks in advance! Florian

[mathdevelop]

It worked fine for the first render. But after click by dropdown cell application crashes with error.

Uncaught TypeError: Cannot read properties of undefined (reading 'scrollableElement')

Disabling Strict Mode worked for me.

[williamstein]

I'd be glad to hear about your feedback. Wanna join our Discord? https://discord.gg/XMHJrDGp

Thanks for this really cool library. The Discord invite link has expired or is now invalid. It's also broken on https://reactgrid.com/support

Can you generate a new one?

[alonshmiel]

Hi, I know a lot of developers were waiting for upgrading this amazing library to React 18.

So I have good news!! I forked this library to my account and made the relevant changes in order to make it work in React 18. I have tested it on my Mac but please test it also and verify everything works.

I updated React to 18, node-sass to sass and changed the config of rollup to use sass instead of node-sass. So I succeeded to use this library with strict mode:

<React.StrictMode>
      <Grid...../>
</React.StrictMode>

I will make a PR for this library so the maintainers will be able to merge it to their library.

You can install my library by:

npm install git+https://github.com/alonshmiel/reactgrid.git

And then you can use the CSS by:

@import "@silevis/reactgrid/dist/styles.scss"; And the JS by:

import {
  ReactGrid,
  getCellProperty,
  getCharFromKeyCode,
  inNumericKey,
  isAllowedOnNumberTypingKey,
  isAlphaNumericKey,
  isNavigationKey,
  isNumpadNumericKey,
  keyCodes,
} from "@silevis/reactgrid/dist/core";

I faced with an error when using strict mode (can't access property "scrollableElement", t is undefined) It was because of the strict mode. React StrictMode calls reducer two times to eliminate any side-effects. This error was thrown because the reducer didn't store the state so the second call didn't have the old state that it needs. That's why I stored the state.

Please open any issue you face with, and I hope to maintain this library as much as I can since I'm gonna have a new baby boy in my family 💚

[throoze]

Thanks a lot for the contribution! and congrats and blessings for your new baby! :)

On Sun, May 28, 2023 at 5:22 PM Alon Shmiel @.***> wrote:

Hi, I know a lot of developers were waiting for upgrading this amazing library to React 18.

So I have good news!! I forked this library to my account and made the relevant changes in order to make it work in React 18. I have tested it on my Mac but please test it also and verify everything works.

I updated React to 18, node-sass to sass and changed the config of rollup to use sass instead of node-sass. So I succeeded to use this library with strict mode:

<React.StrictMode> <Grid...../> </React.StrictMode>

I will make a PR for this library so the maintainers will be able to merge it to their library.

You can install my library by:

npm install git+https://github.com/alonshmiel/reactgrid.git

And then you can use the CSS by:

@import @.***/reactgrid/dist/styles.scss"; And the JS by:

import { ReactGrid, getCellProperty, getCharFromKeyCode, inNumericKey, isAllowedOnNumberTypingKey, isAlphaNumericKey, isNavigationKey, isNumpadNumericKey, keyCodes, } from @.***/reactgrid/dist/core";

I faced with an error when using strict mode (can't access property "scrollableElement", t is undefined) It was because of the strict mode. React StrictMode calls reducer two times to eliminate any side-effects. This error was thrown because the reducer didn't store the state so the second call didn't have the old state that it needs. That's why I stored the state.

Please open any issue you face with, and I hope to maintain this library as much as I can since I'm gonna have a new baby boy in my family 💚

— Reply to this email directly, view it on GitHub https://github.com/silevis/reactgrid/issues/124#issuecomment-1566267407, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABXDDYANJANVAZWFZQO52LXIO6YJANCNFSM6AAAAAAQBLHCSQ . You are receiving this because you commented.Message ID: @.***>

-- Victor

[DLowHP]

Hi! This issue has been solved by updating react-scripts (see: PR#193). Please let us know if you encounter any other issues. Take care!

[FlorianCassayre]

Nice, thanks!