Skip to content

fix: use client removed from dist files #1038

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 12, 2023
Merged

fix: use client removed from dist files #1038

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3c3630
fix: remove use client by default from the project build files
danielbarion Jun 12, 2023
ed2a4e6
docs: add troubleshooting docs related to Next.js use client error
danielbarion Jun 12, 2023
bcfdb4f
docs: update readme.md to be more simple and update troubleshooting s…
danielbarion Jun 12, 2023
fc4ec8a
Update README.md
danielbarion Jun 12, 2023
fc14093
docs: update readme.md with installation and use steps
danielbarion Jun 12, 2023
e005df1
docs: update troubleshooting section of use client error on Next.js
danielbarion Jun 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 9 additions & 186 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@

If you like the project, please give the project a GitHub 🌟

---

Why do we use ADS on our docs?

- ReactTooltip is an open source project, this is the way that we find to be financed by the community.

## Demo

[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
Expand All @@ -42,121 +48,6 @@ Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-sta
</a>
</p>

## 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.

![image](https://user-images.githubusercontent.com/9615850/205637814-c0ef01ae-bd77-4e7f-b4bf-df502c71e5c3.png)

## 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>
```

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-tooltip

Usage

1 . Import the CSS file to set default styling.

⚠️ If you are using a version before than v5.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-id is the equivalent of V4's data-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" />

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, it's okay for me to keep this info in our readme :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, thanks for the code!

## Troubleshooting

Before trying these, make sure you're running the latest ReactTooltip version with
Expand All @@ -171,79 +62,11 @@ or
yarn add react-tooltip@latest
```

Please check our [troubleshooting section](https://react-tooltip.com/docs/troubleshooting) on our docs.

If you can't find your problem here, make sure there isn't [an open issue](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).

### The tooltip is broken/not showing up

Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it.

```jsx
import 'react-tooltip/dist/react-tooltip.css'
```

If you've imported the default styling and the tooltip is still not showing up when you hover on your anchor element, make sure you have content to be displayed by the tooltip.

If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have empty values) on the anchor element, and also the `content`, `render`, and `children` props on the tooltip are unset (or have empty values), the tooltip is not shown by default.

### Next.js `TypeError: f is not a function`

This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
The best way to solve this is to upgrade to `[email protected]` or later versions.

Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.

### Bad performance

If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.

#### Move `<Tooltip />` on the DOM

This is specially relevant when using components that are conditionally rendered.

Always try to keep the `<Tooltip />` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.

We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).

#### Dynamically generated anchor elements

You should avoid needlessly using a large amount of `<Tooltip />` components. One tooltip component that you use across your whole application should be good enough in most cases, but you should be fine to add a few more if you need to use different styled tooltips.

Here's a simple example on how to improve performance when using dynamically generated items.

> Check the docs for examples for the [`anchorSelect`](https://react-tooltip.com/docs/examples/anchor-select) and [`render`](https://react-tooltip.com/docs/examples/render) props for more complex use cases.

```jsx
// ❌ BAD
<div className="items-container">
{myItems.map(({ id, content, tooltip }) => (
<div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
{content}
<Tooltip id={`tooltip-${id}`} content={tooltip} />
</div>
))}
</div>
```

```jsx
// ✅ GOOD
<div className="items-container">
{
myItems.map(({ id, content, tooltip }) => (
<div
key={id}
className="item"
data-tooltip-id="my-tooltip"
data-tooltip-content={tooltip}
>
{content}
</div>
))
}
</div>
<Tooltip id="my-tooltip" />
```

## Article

[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
Expand All @@ -270,7 +93,7 @@ We would gladly accept a new maintainer to help out!

## Contributing

We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.
We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](CONTRIBUTION.md) doc has some details.

## License

Expand Down
22 changes: 22 additions & 0 deletions docs/docs/examples/html.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,25 @@ import { Tooltip } from 'react-tooltip';
id="my-tooltip-html-prop"
html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
/>

#### 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>
```
25 changes: 25 additions & 0 deletions docs/docs/troubleshooting.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,31 @@ The best way to solve this is to upgrade to `[email protected]` or later versions.

Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.

## 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'
```

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

## 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'

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown breaks when using backticks inside a block quote 🤦‍♀️

the suggestions should still be clear though

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, thanks for the refactor, looks better now!

## Bad performance

If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.
Expand Down
4 changes: 1 addition & 3 deletions rollup.config.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ const banner = `
* {@link https://github.com/ReactTooltip/react-tooltip}
* @copyright ReactTooltip Team
* @license MIT
*/

'use client';` // this 'use client' prevent break Next.js 13 projects when using tooltip on server side components
*/`

const external = [
...Object.keys(pkg.peerDependencies ?? {}),
Expand Down