Giter VIP home page Giter VIP logo

react-highlight-menu's Issues

Firefox Compatibility

The menu doesn't appear upon highlight in Firefox. I'm guessing this is related to Firefox's esoteric getSelection method, I know developers for a while have had to use selectionStart and selectionEnd instead of getSelection.toString. Would dearly appreciate a fix!

FWIW I also encountered issues on IE (demo page wouldn't even load) but may not be too reliable as I was testing on a VM from BrowserStack. Works great on all other browsers I've tested (Opera, Chrome, Vivaldi, Edge, Safari).

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format.

When using react-highlight-menu 2.0.2 with a Next.js 13.4.9 app, I am getting this warning

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at Lo (/testing/my_nextjs_app/node_modules/react-highlight-menu/dist/index.cjs.js:30:23196)
    at div
    at ChatMessage (webpack-internal:///./src/components/ChatMessage.js:24:25)
    at main
    at div
    at div
    at Layout (webpack-internal:///./src/components/layout.js:16:19)
    at MyApp (webpack-internal:///./src/pages/_appInner.js:21:18)
    at Provider (/testing/my_nextjs_app/node_modules/react-redux/lib/components/Provider.js:19:3)
    at MyAppWithRedux (webpack-internal:///./src/pages/_app.js:108:27)
    at StyleRegistry (/testing/my_nextjs_app/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/testing/my_nextjs_app/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
    at AppContainer (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:346:29)
    at AppContainerWithIsomorphicFiberStructure (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:382:57)
    at div
    at Body (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:682:21)

My component that uses HighlightMenu is like this:

The app still works as expected. But can we do something to fix this warning? Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.