{"_id":"@aslakson/tippyjs-react","name":"@aslakson/tippyjs-react","dist-tags":{"latest":"4.2.6"},"versions":{"4.2.6":{"name":"@aslakson/tippyjs-react","version":"4.2.6","description":"React component for Tippy.js","main":"dist/tippy-react.umd.js","module":"dist/tippy-react.esm.js","unpkg":"dist/tippy-react.umd.min.js","types":"index.d.ts","sideEffects":false,"scripts":{"dev":"parcel demo/index.html -d .devserver --no-cache","build":"rollup --config","test":"jest --coverage","lint":"eslint \"{src,test}/**/*.js\"","format":"prettier --write \"{src,test,demo}/**/*.{js,ts,json,css,md}\""},"author":{"name":"atomiks"},"license":"MIT","keywords":["tooltip","popover","tippy","react"],"jest":{"setupFilesAfterEnv":["test/setup.js","@testing-library/jest-dom/extend-expect"],"coveragePathIgnorePatterns":["test/setup.js"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"{src,test,demo}/**/*.{js,ts,json,css,md}":["prettier --write","git add"],"{src,test}/**/*.js":["eslint --fix","git add"]},"dependencies":{"tippy.js":"^6.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/core":"^7.8.7","@babel/preset-env":"^7.8.7","@babel/preset-react":"^7.0.0","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.7","@types/react":"^16.8.2","babel-eslint":"^10.0.1","babel-jest":"^25.1.0","babel-plugin-annotate-pure-calls":"^0.4.0","core-js":"^3.6.4","eslint":"^5.14.1","eslint-config-prettier":"^3.6.0","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.7.0","framer-motion":"^1.10.3","husky":"^1.3.1","jest":"^24.1.0","lint-staged":"^8.1.0","parcel":"^1.12.3","prettier":"^1.16.1","react":"^16.8.1","react-dom":"^16.8.1","react-spring":"^8.0.27","rollup":"^1.14.3","rollup-plugin-babel":"^4.3.2","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-terser":"^5.2.0","styled-components":"^5.0.1","typescript":"^3.6.3"},"directories":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/atomiks/tippyjs-react.git"},"bugs":{"url":"https://github.com/atomiks/tippyjs-react/issues"},"homepage":"https://github.com/atomiks/tippyjs-react#readme","gitHead":"bcd68eed3784c94a37002c64b681cf66624c0f46","_id":"@aslakson/tippyjs-react@4.2.6","_nodeVersion":"18.16.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-+zuLKoO6uQnm/Yj1wDi6cXz9rDZuOTSx7v4H4LnxJF8ThDysSVY1V1HKLT2+YNy6vRCVFTI4sEVRGUUOZKeasA==","shasum":"0ad065aac9d7b923b4b0698dd522a63fa9fbc42e","tarball":"https://registry.npmjs.org/@aslakson/tippyjs-react/-/tippyjs-react-4.2.6.tgz","fileCount":17,"unpackedSize":282591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM5zuZrT8U0z7K/JExlteQrrxLR3+RaU3Ls+mbaElycgIhAJL94b0LjpAHEBzcBHgGjZtgjVFH6XQ96zFuJCFecnEa"}]},"_npmUser":{"name":"aslakson","email":"aslakson@fanthem.io"},"maintainers":[{"name":"aslakson","email":"aslakson@fanthem.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tippyjs-react_4.2.6_1690469435649_0.854321008454878"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-27T14:50:35.513Z","4.2.6":"2023-07-27T14:50:35.864Z","modified":"2023-07-27T14:50:36.196Z"},"maintainers":[{"name":"aslakson","email":"aslakson@fanthem.io"}],"description":"React component for Tippy.js","homepage":"https://github.com/atomiks/tippyjs-react#readme","keywords":["tooltip","popover","tippy","react"],"repository":{"type":"git","url":"git+https://github.com/atomiks/tippyjs-react.git"},"author":{"name":"atomiks"},"bugs":{"url":"https://github.com/atomiks/tippyjs-react/issues"},"license":"MIT","readme":"
\n \"Logo\"\n
\n\n
\n

Tippy.js for React

\n
\n\n⚠️⚠️⚠️\n\n**If you're new here, we recommend using [Floating UI's React DOM Interactions package](https://floating-ui.com/docs/react-dom-interactions) instead of this library**. It offers a first class React experience rather than being a wrapper around a vanilla library and encourages much better accessibility practices with more flexibility.\n\nIf you want some out-of-the-box styling and animations, and are adding simple tooltips/popovers to your app, Tippy will still work fine. For more advanced/headless solutions, it's best to use Floating UI!\n\n⚠️⚠️⚠️\n\n---\n\n[Tippy.js](https://github.com/atomiks/tippyjs/) is the complete tooltip,\npopover, dropdown, and menu solution for the web, powered by Popper.\n\nTippy is an abstraction over Popper that provides common logic involved in all\ntypes of elements that pop out on top of the UI, positioned next to a target or\nreference element. This is a React wrapper for the core library, providing full\nintegration including headless rendering abilities.\n\n## 🚀 Installation\n\n```bash\n# npm\nnpm i @tippyjs/react\n\n# Yarn\nyarn add @tippyjs/react\n```\n\nCDN: https://unpkg.com/@tippyjs/react\n\n## 🖲 Usage\n\nThere are two ways to use this component:\n\n- **Default**: With the built-in DOM rendering and optionally the default CSS.\n This is complete \"out of the box\" behavior and requires no setup. If you want\n something that just works, this is for you.\n- **Headless**: With React's DOM rendering for improved usage with CSS-in-JS and\n spring libraries. If you want greater control over your poppers to integrate\n fully with design systems, this is for you.\n\nBoth may be used in conjunction.\n\n### Default Tippy\n\nImport the `Tippy` component and (optionally) the core CSS. Wrap the ``\ncomponent around the element, supplying the tooltip's content as the `content`\nprop. It can take a string or a tree of React elements.\n\n```jsx\nimport React from 'react';\nimport Tippy from '@tippyjs/react';\nimport 'tippy.js/dist/tippy.css'; // optional\n\nconst StringContent = () => (\n \n \n \n);\n\nconst JSXContent = () => (\n Tooltip}>\n \n \n);\n```\n\nDefault Tippy \"just works\" out of the box.\n\n### Headless Tippy\n\nRender your own tippy element from scratch:\n\n```jsx\nimport React from 'react';\nimport Tippy from '@tippyjs/react/headless'; // different import path!\n\nconst HeadlessTippy = () => (\n (\n
\n My tippy box\n
\n )}\n >\n \n \n);\n```\n\n`attrs` is an object containing `data-placement`, `data-reference-hidden`, and\n`data-escaped` attributes. This allows you to conditionally style your tippy.\n\n#### Headless animation\n\n- [`framer-motion`](https://codesandbox.io/s/festive-fire-hcr47)\n- [`react-spring`](https://codesandbox.io/s/vigilant-northcutt-7w3yr)\n\n#### Headless arrow\n\nTo make Popper position your custom arrow, set a `data-popper-arrow` attribute\non it:\n\n```jsx\n (\n \n Hello\n \n \n )}\n>\n \n\n```\n\nFor details on styling the arrow from scratch,\n[take a look at the Popper tutorial](https://popper.js.org/docs/v2/tutorial/#arrow).\n\n**Note: your arrow must be an `HTMLElement` (not an `SVGElement`). To use an SVG\narrow, wrap it in a `
` tag with the `data-popper-arrow` attribute.**\n\nYou may also pass a ref to the element directly without the attribute using a\ncallback ref:\n\n```jsx\nfunction App() {\n const [arrow, setArrow] = useState(null);\n\n return (\n (\n \n Content\n \n \n )}\n popperOptions={{\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrow, // can be a CSS selector too\n },\n },\n ],\n }}\n >\n \n \n );\n}\n```\n\n#### Headless root element\n\nWhen rendering an element with the `render` prop, you're rendering the inner\nelement that the root popper (positioned) node wraps.\n\nFor advanced cases you can access the root element via `instance.popper`.\n\n[Here's `moveTransition` with Framer Motion](https://codesandbox.io/s/tippyjs-react-framer-motion-j94mj).\n\n### Component children\n\nIf you want to use a component element as a child of the component, ensure you\nforward the ref to the DOM node:\n\n```jsx\nimport React, {forwardRef} from 'react';\n\nfunction ThisWontWork() {\n return ;\n}\n\nconst ThisWillWork = forwardRef((props, ref) => {\n return ;\n});\n\nfunction App() {\n return (\n \n \n \n );\n}\n```\n\n`styled-components` v4+ does this for you automatically, so it should be\nseamless when using the `styled` constructor.\n\nWorkaround for old libraries that don't forward the ref is to use a ``\nwrapper tag:\n\n```jsx\n\n \n Reference\n \n\n```\n\n## 🧬 Props\n\nAll of the native Tippy.js props can be passed to the component.\n\nVisit [All Props](https://atomiks.github.io/tippyjs/v6/all-props/) to view the\ncomplete list.\n\n```jsx\n\n \n\n```\n\nIn addition, there are 3 more props added specifically for the React component.\n\n### `className?: string`\n\n```jsx\n\n \n\n```\n\nThis allows you to use `styled(Tippy)` or the `css` prop in `styled-components`\nor `emotion`.\n\n> Note: Does not apply if using Headless Tippy.\n\n### `disabled?: boolean`\n\n```jsx\nfunction App() {\n const [disabled, setDisabled] = useState(false);\n\n return (\n \n \n \n );\n}\n```\n\n### `visible?: boolean` (controlled mode)\n\nUse React's state to fully control the tippy instead of relying on the native\n`trigger` and `hideOnClick` props:\n\n```jsx\nfunction App() {\n const [visible, setVisible] = useState(true);\n const show = () => setVisible(true);\n const hide = () => setVisible(false);\n\n return (\n \n \n \n );\n}\n```\n\n### `reference?: React.RefObject | Element`\n\n> Available from `v4.1.0`\n\nIf you can't place your reference element as a child inside ``, you can\nuse this prop instead. It accepts a React `RefObject` (`.current` property) or a\nplain `Element`.\n\n```jsx\nfunction App() {\n const ref = useRef();\n\n return (\n <>\n \n \n );\n}\n```\n\n[Read more about plugins here](https://atomiks.github.io/tippyjs/v6/plugins/).\n\n## 🌈 Multiple tippies on a single element\n\nYou can nest the components like so:\n\n```jsx\n\n \n \n \n \n \n \n \n\n```\n\n## Lazy mounting\n\nBy default, Tippy mounts your `content` or `render` elements into a container\nelement once created, even if the tippy isn't mounted on the DOM. In most cases,\nthis is fine, but in performance-sensitive scenarios or cases where mounting the\ncomponent should fire effects only when the tippy mounted, you can lazify the\ncomponent.\n\n[View the following gists to optimize your `` if needed.](https://gist.github.com/atomiks/520f4b0c7b537202a23a3059d4eec908)\n\n## 📚 useSingleton\n\nA Hook for the\n[`createSingleton()`](https://atomiks.github.io/tippyjs/v6/addons/#singleton)\naddon to re-use a single tippy element for many different reference element\ntargets.\n\n[View on CodeSandbox](https://codesandbox.io/s/unruffled-pasteur-4yy99?file=/src/App.js)\n\n```jsx\nimport Tippy, {useSingleton} from '@tippyjs/react';\n\nfunction App() {\n const [source, target] = useSingleton();\n\n return (\n <>\n {/* This is the tippy that gets used as the singleton */}\n \n\n {/* These become \"virtual\" */}\n \n \n \n \n \n \n \n );\n}\n```\n\n`useSingleton()` takes an optional props argument:\n\n```js\nconst [source, target] = useSingleton({\n disabled: true,\n overrides: ['placement'],\n});\n```\n\n### Headless singleton\n\nThe `render` prop takes the singleton content as a second parameter:\n\n```jsx\nimport Tippy, {useSingleton} from '@tippyjs/react/headless';\n\nfunction App() {\n const [source, target] = useSingleton();\n\n return (\n <>\n (\n
\n {content}\n
\n )}\n delay={500}\n />\n\n \n \n \n \n \n \n \n );\n}\n```\n\n## 📝 License\n\nMIT\n","readmeFilename":"README.md"}