3.0 (#116)

Author: atomiks

.eslintrc

@@ -22,6 +22,7 @@
   "rules": {
     "react/prop-types": "off",
     "no-unused-vars": ["error", { "ignoreRestSiblings": true }],
-    "react-hooks/rules-of-hooks": "error"
+    "react-hooks/rules-of-hooks": "error",
+    "react/display-name": "off"
   }
 }

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 node_modules
 coverage
 .devserver

README.md

@@ -20,6 +20,7 @@
 and popover library powered by Popper.js. This is a lightweight wrapper that
 lets you use it declaratively in React.
 
+<!--
 ## 💎 Examples
 
 ### Tooltips
@@ -30,6 +31,7 @@ lets you use it declaratively in React.
 ### Popovers
 
 - [Accessible Emoji Reaction Picker](https://codesandbox.io/s/1vzvoo9mwl)
+-->
 
 ## 🚀 Installation
 
@@ -47,12 +49,14 @@ Requires React 16.8+
 
 ## 🖲 Usage
 
-Wrap the `<Tippy />` component around the element, supplying the tooltip's
-content as the `content` prop. It can take a string or a tree of React elements.
+Import the `Tippy` component and the core CSS. Wrap the `<Tippy />` component
+around the element, supplying the tooltip's content as the `content` prop. It
+can take a string or a tree of React elements.
 
 ```jsx
 import React from 'react'
 import Tippy from '@tippy.js/react'
+import 'tippy.js/dist/tippy.css'
 
 const StringContent = () => (
   <Tippy content="Hello">
@@ -101,22 +105,17 @@ element as a workaround.
 
 ```jsx
 <Tippy content="Tooltip">
-  <span>
-    <LegacyComponent>Unfortunately</LegacyComponent>
+  <span tabindex="0">
+    <LegacyComponent>Content</LegacyComponent>
   </span>
 </Tippy>
 ```
 
-> Although Tippy will add `tabindex` for you on the `<span>` which allows it to
-> receive focus, it may affect accessibility with regards to screenreaders,
-> since `<span>` is not traditionally focusable (unlike a `<button>` for
-> example).
-
 ## 🧬 Props
 
-All of the native Tippy.js options can be passed as props.
+All of the native Tippy.js props can be passed to the component.
 
-Visit [All Options](https://atomiks.github.io/tippyjs/all-options/) to view the
+Visit [All Props](https://atomiks.github.io/tippyjs/all-props/) to view the
 complete table.
 
 ```jsx
@@ -132,9 +131,9 @@ complete table.
 </Tippy>
 ```
 
-In addition, there are 4 more props added specifically for the React component.
+In addition, there are 3 more props added specifically for the React component.
 
-### `className?: string` (v2.1)
+### `className?: string`
 
 A React alternative to the `theme` prop. The className gets added to the tooltip
 element's class list as expected, without adding `-theme` as a suffix.
@@ -205,28 +204,28 @@ function App() {
 > **Note**: You should also set the `hideOnClick` prop to `false` if you don't
 > want the tippy to hide when the user clicks on the document somewhere.
 
-### `onCreate?: (instance: Instance) => void`
-
-Callback invoked when the tippy instance has been created. Use this when you
-need to store the tippy instance on the component.
+### Plugins
 
-This should only be done for advanced (imperative) manipulation of the tippy
-instance – in most cases using props should suffice.
+Tippy.js splits certain props into separate pieces of code called plugins to
+enable treeshaking, so that users who don't need the prop's functionality are
+not burdened with the cost of it.
 
 ```jsx
+import Tippy from '@tippy.js/react'
+import { followCursor } from 'tippy.js'
+import 'tippy.js/dist/tippy.css'
+
 function App() {
-  const tippyInstance = useRef()
   return (
-    <Tippy
-      content="Tooltip"
-      onCreate={instance => (tippyInstance.current = instance)}
-    >
+    <Tippy content="Tooltip" followCursor={true} plugins={[followCursor]}>
       <button />
     </Tippy>
   )
 }
 ```
 
+[Read more about plugins here](https://atomiks.github.io/tippyjs/plugins/).
+
 ### Default props
 
 You can create a new component file that exports a wrapper component that has
@@ -264,7 +263,6 @@ export function Tooltip(props) {
 export function Popover(props) {
   return (
     <Tippy
-      animateFill={false}
       interactive={true}
       interactiveBorder={10}
       animation="scale"
@@ -295,24 +293,25 @@ You can nest the components like so:
 </Tippy>
 ```
 
-## 📚 `<TippyGroup />`
+## 📚 `<TippySingleton />`
 
-Wraps the [`tippy.group()`](https://atomiks.github.io/tippyjs/misc/#groups)
+Wraps the
+[`createSingleton()`](https://atomiks.github.io/tippyjs/addons/#singleton)
 method.
 
 ```jsx
-import Tippy, { TippyGroup } from '@tippy.js/react'
+import Tippy, { TippySingleton } from '@tippy.js/react'
 
 function App() {
   return (
-    <TippyGroup delay={1000}>
+    <TippySingleton delay={1000}>
       <Tippy content="a">
         <button />
       </Tippy>
       <Tippy content="b">
         <button />
       </Tippy>
-    </TippyGroup>
+    </TippySingleton>
   )
 }
 ```
@@ -322,7 +321,7 @@ function App() {
 <img src="https://img.shields.io/bundlephobia/minzip/@tippy.js/react.svg?color=%2373bd4b&style=for-the-badge" alt="Bundle size">
 
 - `popper.js` ≈ 7 kB
-- `tippy.js` ≈ 7.5 kB (including CSS)
+- `tippy.js` ≈ 5.5 kB (including CSS)
 - `@tippy.js/react` ≈ 1 kB
 
 If you're using Popper.js for other parts of your app, the added cost becomes

demo/index.js

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom'
-import Tippy, { TippyGroup } from '../src'
+import Tippy, { TippySingleton } from '../src'
+import { followCursor } from 'tippy.js'
+
+import 'tippy.js/dist/tippy.css'
 import './index.css'
 
 function ContentString() {
@@ -66,7 +69,7 @@ function VisibleProp() {
   )
 }
 
-function Group() {
+function Singleton() {
   const [count, setCount] = useState(3)
 
   let children = []
@@ -84,7 +87,15 @@ function Group() {
     }, 5000)
   }, [])
 
-  return <TippyGroup delay={500}>{children}</TippyGroup>
+  return <TippySingleton delay={500}>{children}</TippySingleton>
+}
+
+function FollowCursor() {
+  return (
+    <Tippy content="hi" followCursor={true} plugins={[followCursor]}>
+      <button>followCursor</button>
+    </Tippy>
+  )
 }
 
 function App() {
@@ -96,8 +107,10 @@ function App() {
       <h2>Special</h2>
       <EnabledProp />
       <VisibleProp />
-      <h2>Group dynamic children</h2>
-      <Group />
+      <h2>Singleton dynamic children</h2>
+      <Singleton />
+      <h2>Plugins</h2>
+      <FollowCursor />
     </>
   )
 }

index.d.ts

@@ -1,28 +1,24 @@
 import * as React from 'react'
-import { default as tippyCore, Instance, Options, GroupOptions } from 'tippy.js'
+import { default as tippyCore, Instance, Props, Plugin } from 'tippy.js'
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
-export interface TippyProps extends Omit<Options, 'content'> {
+export interface TippyProps extends Omit<Props, 'content'> {
   content: React.ReactChild | React.ReactChild[]
   children: React.ReactElement<any>
-  onCreate?: (instance: Instance) => void
-  /** @deprecated Use `visible` instead */
-  isVisible?: boolean
-  /** @deprecated Use `enabled` instead */
-  isEnabled?: boolean
   visible?: boolean
   enabled?: boolean
   className?: string
+  plugins?: Plugin[]
 }
 
 declare const Tippy: React.ForwardRefExoticComponent<TippyProps>
 export default Tippy
 
-export const tippy: typeof tippyCore;
+export const tippy: typeof tippyCore
 
-export interface TippyGroupProps extends GroupOptions {
+export interface TippySingletonProps extends Props {
   children: Array<React.ReactElement<any>>
 }
 
-export const TippyGroup: React.FunctionComponent<TippyGroupProps>
+export const TippySingleton: React.FunctionComponent<TippySingletonProps>