fix: use client removed from dist files #1038
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
gabrieljablonski requested changes Jun 12, 2023
Comment on lines 45 to 159
| ## Installation | ||
| | ||
| ```sh | ||
| npm install react-tooltip | ||
| ``` | ||
| | ||
| or | ||
| | ||
| ```sh | ||
| yarn add react-tooltip | ||
| ``` | ||
| | ||
| ## Usage | ||
| | ||
| > :warning: ReactTooltip will inject the default styles into the page by default on version `5.13.0` or newer. | ||
| > The `react-tooltip/dist/react-tooltip.css` file is only for style reference and doesn't need to be imported manually anymore if you are already using `v5.13.0` or upper. | ||
| > :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features. | ||
| > In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details. | ||
| ### Using NPM package | ||
| | ||
| 1 . Import the CSS file to set default styling. | ||
| | ||
| > :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show! | ||
| ```js | ||
| import 'react-tooltip/dist/react-tooltip.css' | ||
| ``` | ||
| | ||
| This needs to be done only once and only if you are using a version before than `5.13.0`. We suggest you do it on your `src/index.js` or equivalent file. | ||
| | ||
| 2 . Import `react-tooltip` after installation. | ||
| | ||
| ```js | ||
| import { Tooltip } from 'react-tooltip' | ||
| ``` | ||
| | ||
| or if you want to still use the name ReactTooltip as V4: | ||
| | ||
| ```js | ||
| import { Tooltip as ReactTooltip } from 'react-tooltip' | ||
| ``` | ||
| | ||
| 3 . Add `data-tooltip-id="<tooltip id>"` and `data-tooltip-content="<your placeholder>"` to your element. | ||
| | ||
| > `data-tooltip-id` is the equivalent of V4's `data-for`. | ||
| ```jsx | ||
| <a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!"> | ||
| ◕‿‿◕ | ||
| </a> | ||
| ``` | ||
| | ||
| 4 . Include the `<Tooltip />` element. | ||
| | ||
| > Don't forget to set the id, it won't work without it! | ||
| ```jsx | ||
| <Tooltip id="my-tooltip" /> | ||
| ``` | ||
| | ||
| #### Using multiple anchor elements | ||
| | ||
| You can also set the `anchorSelect` tooltip prop to use the tooltip with multiple anchor elements without having to set `data-tooltip-id` on each of them. | ||
| `anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). | ||
| | ||
| ```jsx | ||
| <a className="my-anchor-element" data-tooltip-content="Hello world!"> | ||
| ◕‿‿◕ | ||
| </a> | ||
| <a className="my-anchor-element" data-tooltip-content="Hello to you too!"> | ||
| ◕‿‿◕ | ||
| </a> | ||
| <Tooltip anchorSelect=".my-anchor-element" /> | ||
| ``` | ||
| | ||
| Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases. | ||
| | ||
| ### Standalone | ||
| | ||
| You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page. | ||
| | ||
| mode: `esm` `cjs` `umd` | ||
| | ||
| If you are using a version older than `v5.13.0` don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application. Version `v5.13.0` or newer already inject the default styles into the page by default. | ||
| | ||
| PS: all the files have a minified version and a non-minified version. | ||
| | ||
|  | ||
| | ||
| ## Options | ||
| | ||
| For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options) | ||
| | ||
| ### Security note | ||
| | ||
| The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option. | ||
| | ||
| #### JSX note | ||
| | ||
| You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. | ||
| **Example:** | ||
| | ||
| ```jsx | ||
| import ReactDOMServer from 'react-dom/server'; | ||
| [...] | ||
| <a | ||
| data-tooltip-id="my-tooltip" | ||
| data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)} | ||
| > | ||
| ◕‿‿◕ | ||
| </a> | ||
| ``` | ||
| |
Member
There was a problem hiding this comment.
I personally hate going to a package's GitHub and having to go to another page to see simple code examples and/or understand very basic funcionality. I agree with trimming down on the README, but we should keep at least something like the following:
## Installation ```sh npm install react-tooltip or
yarn add react-tooltipUsage
1 . Import the CSS file to set default styling.
⚠️ If you are using a version before thanv5.13.0, you must import the CSS file or the tooltip won't show!
import 'react-tooltip/dist/react-tooltip.css'This needs to be done only once and only if you are using a version before than 5.13.0. We suggest you do it on your src/index.js or equivalent file.
2 . Import react-tooltip after installation.
import { Tooltip } from 'react-tooltip'or if you want to still use the name ReactTooltip as V4:
import { Tooltip as ReactTooltip } from 'react-tooltip'3 . Add data-tooltip-id="<tooltip id>" and data-tooltip-content="<your placeholder>" to your element.
data-tooltip-idis the equivalent of V4'sdata-for.
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!"> ◕‿‿◕ </a>4 . Include the <Tooltip /> element.
Don't forget to set the id, it won't work without it!
<Tooltip id="my-tooltip" /> Member Author
There was a problem hiding this comment.
Hmm, it's okay for me to keep this info in our readme :)
Member Author
There was a problem hiding this comment.
done, thanks for the code!
Comment on lines 74 to 98
| ## Next.js `"use client"` error | ||
| | ||
| This normally happens when you use react-tooltip inside a component that is not tagged as client component. | ||
| | ||
| To use react-tooltip on Next.js 13 without had to tag your component or page as client component, just create a new file `react-tooltip.tsx` and place the following code inside of the created file: | ||
| | ||
| ```jsx | ||
| // src/components/ReactTooltip.tsx | ||
| 'use client' | ||
| | ||
| export * from 'react-tooltip' | ||
| ``` | ||
| | ||
| And in the place that you are importing React Tooltip: | ||
| | ||
| ```jsx | ||
| // ❌ Old | ||
| import { Tooltip } from 'react-tooltip' | ||
| ``` | ||
| | ||
| ```jsx | ||
| // ✅ New | ||
| import { Tooltip } from 'components/react-tooltip' | ||
| ``` | ||
| |
Member
There was a problem hiding this comment.
## Next.js `"use client"` error This normally happens when you use `react-tooltip` inside a component that is not tagged as client component. For more info, see the [Next.js docs](https://nextjs.org/docs/getting-started/react-essentials#client-components). To use `react-tooltip` on Next.js 13 without having to tag your component or page as a client component, just create a new file `ReactTooltip.tsx` (for this example, the file path is `src/components/ReactTooltip.tsx`) and place the following code inside of the created file: :::caution Avoid naming the file `react-tooltip.tsx` (or with whichever extension your project uses), since it may interfere with your editor's autocomplete funcionality. ::: ```jsx // src/components/ReactTooltip.tsx 'use client' export * from 'react-tooltip' And in the place that you are importing React Tooltip:
// ❌ Old import { Tooltip } from 'react-tooltip'// ✅ New import { Tooltip } from 'components/react-tooltip' Member
There was a problem hiding this comment.
markdown breaks when using backticks inside a block quote 🤦♀️
the suggestions should still be clear though
Member Author
There was a problem hiding this comment.
done, thanks for the refactor, looks better now!
Co-authored-by: Gabriel Jablonski <gabriel.g.jablonski@gmail.com>
gabrieljablonski approved these changes Jun 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
closes #1037
"use client"removed as default included in our dist files