From 9d35880c6de57162f0749fccf113784fa0476891 Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Sun, 2 Jul 2023 13:00:27 -0300 Subject: [PATCH 1/6] feat: add event listener to handle style injection --- src/components/TooltipController/TooltipController.tsx | 8 ++++++++ src/index.tsx | 8 ++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 0bdb3e72..d095b269 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -168,6 +168,14 @@ const TooltipController = ({ setTooltipPositionStrategy(positionStrategy) }, [positionStrategy]) + useEffect(() => { + if (typeof window !== 'undefined') { + // here we can do validations related to the props before inject the styles, + // we can also send something into the 'detail' to the inject style function + window.dispatchEvent(new CustomEvent('rt_inject_styles', { detail: {} })) + } + }, []) + useEffect(() => { const elementRefs = new Set(anchorRefs) diff --git a/src/index.tsx b/src/index.tsx index d8c11be7..00a4c41a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,8 +20,12 @@ import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProvid const TooltipCoreStyles = 'react-tooltip-core-css-placeholder' const TooltipStyles = 'react-tooltip-css-placeholder' -injectStyle({ css: TooltipCoreStyles, type: 'core' }) -injectStyle({ css: TooltipStyles }) +if (typeof window !== 'undefined') { + window.addEventListener('rt_inject_styles', () => { + injectStyle({ css: TooltipCoreStyles, type: 'core' }) + injectStyle({ css: TooltipStyles }) + }) +} export { TooltipController as Tooltip } from './components/TooltipController' export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider' From b62fa2fc77857f82d2d7e91ee5e50d9018de88ae Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 24 Jul 2023 12:15:35 -0300 Subject: [PATCH 2/6] feat: `disableStyleInjection` tooltip prop --- .../TooltipController/TooltipController.tsx | 23 +++++++- .../TooltipControllerTypes.d.ts | 1 + src/index.tsx | 16 ++++-- src/utils/handle-style.ts | 55 ++++++++++++------- 4 files changed, 66 insertions(+), 29 deletions(-) diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index d095b269..6b988a2a 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -44,6 +44,7 @@ const TooltipController = ({ style, position, isOpen, + disableStyleInjection = false, setIsOpen, afterShow, afterHide, @@ -61,6 +62,7 @@ const TooltipController = ({ const [tooltipEvents, setTooltipEvents] = useState(events) const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy) const [activeAnchor, setActiveAnchor] = useState(null) + const styleInjectionRef = useRef(disableStyleInjection) /** * @todo Remove this in a future version (provider/wrapper method is deprecated) */ @@ -168,11 +170,26 @@ const TooltipController = ({ setTooltipPositionStrategy(positionStrategy) }, [positionStrategy]) + useEffect(() => { + if (styleInjectionRef.current === disableStyleInjection) { + return + } + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.warn('[react-tooltip] Do not change `disableStyleInjection` dynamically.') + } + }, [disableStyleInjection]) + useEffect(() => { if (typeof window !== 'undefined') { - // here we can do validations related to the props before inject the styles, - // we can also send something into the 'detail' to the inject style function - window.dispatchEvent(new CustomEvent('rt_inject_styles', { detail: {} })) + window.dispatchEvent( + new CustomEvent('react-tooltip-inject-styles', { + detail: { + disableCore: disableStyleInjection === 'core', + disableBase: disableStyleInjection, + }, + }), + ) } }, []) diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 674225e1..8a5132db 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -60,6 +60,7 @@ export interface ITooltipController { style?: CSSProperties position?: IPosition isOpen?: boolean + disableStyleInjection?: boolean | 'core' setIsOpen?: (value: boolean) => void afterShow?: () => void afterHide?: () => void diff --git a/src/index.tsx b/src/index.tsx index 00a4c41a..193d79db 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,10 +21,16 @@ const TooltipCoreStyles = 'react-tooltip-core-css-placeholder' const TooltipStyles = 'react-tooltip-css-placeholder' if (typeof window !== 'undefined') { - window.addEventListener('rt_inject_styles', () => { - injectStyle({ css: TooltipCoreStyles, type: 'core' }) - injectStyle({ css: TooltipStyles }) - }) + window.addEventListener('react-tooltip-inject-styles', (( + event: CustomEvent<{ disableCore: boolean; disableBase: boolean }>, + ) => { + if (!event.detail.disableCore) { + injectStyle({ css: TooltipCoreStyles, type: 'core' }) + } + if (!event.detail.disableBase) { + injectStyle({ css: TooltipStyles, type: 'base' }) + } + }) as EventListener) } export { TooltipController as Tooltip } from './components/TooltipController' @@ -42,5 +48,3 @@ export type { IPosition, Middleware, } - -export { removeStyle } from './utils/handle-style' diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index 7deb84ba..f7a8d441 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -3,6 +3,11 @@ const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles' // This is the ID for the visual styles of ReactTooltip const REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles' +const injected = { + core: false, + base: false, +} + function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, @@ -11,26 +16,10 @@ function injectStyle({ }: { css: string id?: string - type?: string + type?: 'core' | 'base' // eslint-disable-next-line @typescript-eslint/no-explicit-any ref?: any }) { - if ( - type === 'core' && - typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?` - process?.env?.REACT_TOOLTIP_DISABLE_CORE_STYLES - ) { - return - } - - if ( - type !== 'core' && - typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?` - process?.env?.REACT_TOOLTIP_DISABLE_BASE_STYLES - ) { - return - } - if (type === 'core') { // eslint-disable-next-line no-param-reassign id = REACT_TOOLTIP_CORE_STYLES_ID @@ -42,7 +31,18 @@ function injectStyle({ } const { insertAt } = ref - if (!css || typeof document === 'undefined' || document.getElementById(id)) { + if (!css || typeof document === 'undefined' || injected[type]) { + return + } + + if (document.getElementById(id)) { + // this should never happen because of `injected[type]` + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.warn( + `[react-tooltip] Element with id '${id}' already exists. Call \`removeStyle()\` first`, + ) + } return } @@ -67,22 +67,37 @@ function injectStyle({ } else { style.appendChild(document.createTextNode(css)) } + + injected[type] = true } function removeStyle({ type = 'base', id = REACT_TOOLTIP_BASE_STYLES_ID, }: { - type?: string + type?: 'core' | 'base' id?: string } = {}) { + if (!injected[type]) { + return + } + if (type === 'core') { // eslint-disable-next-line no-param-reassign id = REACT_TOOLTIP_CORE_STYLES_ID } const style = document.getElementById(id) - style?.remove() + if (style?.tagName === 'style') { + style?.remove() + } else if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.warn( + `[react-tooltip] Failed to remove 'style' element with id '${id}'. Call \`injectStyle()\` first`, + ) + } + + injected[type] = false } export { injectStyle, removeStyle } From 3a9688837600761191e82dbcc3468171eb0032de Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 24 Jul 2023 12:17:08 -0300 Subject: [PATCH 3/6] docs: `disableStyleInjection` tooltip prop --- docs/docs/examples/styling.mdx | 45 ++++++------------- docs/docs/options.mdx | 80 +++++++++++++++------------------- 2 files changed, 48 insertions(+), 77 deletions(-) diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx index ebce197f..8c5137e9 100644 --- a/docs/docs/examples/styling.mdx +++ b/docs/docs/examples/styling.mdx @@ -106,10 +106,14 @@ import { Tooltip } from 'react-tooltip' Please note that **Core** styles are different from **Base** styles, for more information, please check the [Disabling ReactTooltip CSS](#disabling-reacttooltip-css) section. ::: +##### Base styles + In this example, we are adding an extra level to the CSS classes. The following are the default **base** styles for the tooltip: {TooltipStyles} +##### Core styles + And the following are the **core** styles for the tooltip: {TooltipCoreStyles} @@ -370,45 +374,22 @@ In summary, if you do it correctly you can use CSS specificity instead of `!impo ### Disabling ReactTooltip CSS -There are two ways to remove the ReactTooltip CSS: - -#### Environment Variables - -You can prevent ReactTooltip from injecting styles into the page by using environment variables, we currently support two types of styles: `core styles` and `base styles`. - -- Core Styles: basic styles that are necessary to make the tooltip work. -- Base Styles: visual styles to make the tooltip pretty. - -:::info - -We strongly recommend using this way because it's cleaner and better for performance to choose not to inject the styles instead of injecting and removing them when the page loads. +ReactTooltip works seamlessly by automatically injects CSS into your application. To disable this functionality, use the tooltip prop `disableStyleInjection`. +Details on how it works: -::: - -| name | type | required | default | values | description | -| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.

We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. | -| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.

Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. | +- Set to `true`: what we call "base" styles will be disabled. Useful if you wish to style your tooltip from scratch. +- Set to `'core'`: both the "base" and the "core" styles will be disabled. This means the tooltip will not work properly without adding specific CSS attributes to it. -#### Using removeStyle function +In both cases, you can add `import 'react-tooltip/dist/react-tooltip.css'` to your project to get the tooltip working again, or add your own custom CSS. :::caution -Only use this method if you really can't use the environment variables to disable the style injection of ReactTooltip because this can impact the page performance. +Do not set `disableStyleInjection` dynamically. Changing its value requires a page refresh, so that will not work. ::: -The function `removeStyle` accepts the following params: - -| name | type | required | default | values | description | -| ---- | ------ | -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| type | string | no | `base` | `base` `core` | If `core` is defined, the core styles will be removed from the page, if nothing is defined, `base` styles will be removed as default value | - -```jsx -import { removeStyle } from 'react-tooltip' +:::info -... +Check out more details about the [base](#base-styles) and [core](#core-styles) styles. -removeStyle() // removes the injected base style of ReactTooltip -removeStyle({ type: 'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip -``` +::: diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index d3cf91e7..eb6ba25b 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -87,48 +87,38 @@ import { Tooltip } from 'react-tooltip'; #### Available props -| name | type | required | default | values | description | -| ------------------ | -------------------------- | -------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally | -| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally | -| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) | -| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead | -| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) | -| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | -| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | -| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element | -| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | -| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details | -| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | -| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | -| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content | -| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | -| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element | -| `positionStrategy` | `string` | no | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | -| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip | -| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip | -| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | -| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown | -| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown | -| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs | -| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip | -| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) | -| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip | -| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip | -| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM | -| `isOpen` | `boolean` | no | handled by internal state | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) | -| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | -| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown | -| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden | -| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | - -### Envs - -We have some environment variables that can be used to enable or disable some behavior of the ReactTooltip, normally used on the server side. - -#### Available environment variables: - -| name | type | required | default | values | description | -| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.

We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. | -| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.

Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. | +| name | type | required | default | values | description | +| ----------------------- | -------------------------------------- | -------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally | +| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally | +| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) | +| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead | +| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) | +| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | +| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | +| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element | +| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | +| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details | +| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | +| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | +| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content | +| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | +| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element | +| `positionStrategy` | `string` | no | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | +| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip | +| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip | +| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | +| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown | +| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown | +| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs | +| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip | +| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) | +| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip | +| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip | +| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM | +| `isOpen` | `boolean` | no | handled by internal state | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) | +| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | +| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown | +| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden | +| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | +| `disableStyleInjection` | `boolean` | `'core'` | no | `false` | `true` `false` `'core'` | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details | From 7bdce01223a69d96bdfd443f8b6103f5c81140e8 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 24 Jul 2023 20:57:56 -0300 Subject: [PATCH 4/6] feat: deprecate `removeStyle()`/env variables --- src/index.tsx | 2 ++ src/utils/handle-style.ts | 28 ++++++++++++++++++++++++---- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 193d79db..6dc35544 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -48,3 +48,5 @@ export type { IPosition, Middleware, } + +export { removeStyle } from './utils/handle-style' diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index f7a8d441..8b22d177 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -20,6 +20,26 @@ function injectStyle({ // eslint-disable-next-line @typescript-eslint/no-explicit-any ref?: any }) { + if (!css || typeof document === 'undefined' || injected[type]) { + return + } + + if ( + type === 'core' && + typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?` + process?.env?.REACT_TOOLTIP_DISABLE_CORE_STYLES + ) { + return + } + + if ( + type !== 'base' && + typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?` + process?.env?.REACT_TOOLTIP_DISABLE_BASE_STYLES + ) { + return + } + if (type === 'core') { // eslint-disable-next-line no-param-reassign id = REACT_TOOLTIP_CORE_STYLES_ID @@ -31,10 +51,6 @@ function injectStyle({ } const { insertAt } = ref - if (!css || typeof document === 'undefined' || injected[type]) { - return - } - if (document.getElementById(id)) { // this should never happen because of `injected[type]` if (process.env.NODE_ENV !== 'production') { @@ -71,6 +87,10 @@ function injectStyle({ injected[type] = true } +/** + * @deprecated Use the `disableStyleInjection` tooltip prop instead. + * See https://react-tooltip.com/docs/examples/styling#disabling-reacttooltip-css + */ function removeStyle({ type = 'base', id = REACT_TOOLTIP_BASE_STYLES_ID, From 14798bdb3988b34739e49b549402febeb79f3ae4 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 24 Jul 2023 20:58:22 -0300 Subject: [PATCH 5/6] docs: deprecate `removeStyle()`/env variables --- docs/docs/examples/styling.mdx | 37 ++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx index 8c5137e9..4c7161a9 100644 --- a/docs/docs/examples/styling.mdx +++ b/docs/docs/examples/styling.mdx @@ -393,3 +393,40 @@ Do not set `disableStyleInjection` dynamically. Changing its value requires a pa Check out more details about the [base](#base-styles) and [core](#core-styles) styles. ::: + +#### Environment variables + +:::danger + +This has been deprecated. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead. + +::: + +You can prevent ReactTooltip from injecting styles into the page by using environment variables. + +| name | type | required | default | values | description | +| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.

We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. | +| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.

Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. | + + +#### `removeStyle()` function + +:::danger + +This has been deprecated. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead. + +::: + +You can also use the `removeStyle()` function to remove injected styles from the page. It accepts the following parameters: + +| name | type | required | default | values | description | +| ---- | ------ | -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| type | string | no | `base` | `base` `core` | If `core` is defined, the core styles will be removed from the page, if nothing is defined, `base` styles will be removed as default value | + +```jsx +import { removeStyle } from 'react-tooltip' + +removeStyle() // removes the injected base style of ReactTooltip +removeStyle({ type: 'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip +``` From 60f4d2d4ed864d98d2c40683fd3c9079b87c5e74 Mon Sep 17 00:00:00 2001 From: Gabriel Jablonski Date: Wed, 26 Jul 2023 10:28:53 -0300 Subject: [PATCH 6/6] docs: grammar --- docs/docs/examples/styling.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx index 4c7161a9..724e479f 100644 --- a/docs/docs/examples/styling.mdx +++ b/docs/docs/examples/styling.mdx @@ -374,7 +374,7 @@ In summary, if you do it correctly you can use CSS specificity instead of `!impo ### Disabling ReactTooltip CSS -ReactTooltip works seamlessly by automatically injects CSS into your application. To disable this functionality, use the tooltip prop `disableStyleInjection`. +ReactTooltip works seamlessly by automatically injecting CSS into your application. To disable this functionality, use the tooltip prop `disableStyleInjection`. Details on how it works: - Set to `true`: what we call "base" styles will be disabled. Useful if you wish to style your tooltip from scratch.