ryanseddon

https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f600/u1f600_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f603/u1f603_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f604/u1f604_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f601/u1f601_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f606/u1f606_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f605/u1f605_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f602/u1f602_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f923/u1f923_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f62d/u1f62d_u2615.png
https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f617/u1f617_u2615.png

ryanseddon

const tooltipRef = React.useRef(null);
const { isVisible, getTooltipProps, getTriggerProps } = useTooltip({
  tooltipRef
});

// render
<div
  {...getTooltipProps({
    ref: tooltipRef
  })}

ryanseddon

<button {...getTriggerProps({ onMouseEnter: e => e.preventDefault() })}>
  Trigger
</button>

ryanseddon

class Tabs extends React.Component {
  render() {
    return (
      <TabsContainer vertical={true}>
        {({ 
          selectedItem, 
          focusedItem,
          getTabProps,
          getTabListProps,
          getTabPanelProps 

ryanseddon

const { 
  selectedItem, 
  focusedItem,
  getTabProps,
  getTabListProps,
  getTabPanelProps 
} = useTabs({ rtl: true });

ryanseddon

const { 
  selectedItem, 
  focusedItem,
  getTabProps,
  getTabListProps,
  getTabPanelProps 
} = useTabs({ vertical: true });

ryanseddon

<button {...getTabProps({
  item: 'tab 1',
  index: 0,
  focusRef: React.createRef(null)
})>
  tab 1
</button>

ryanseddon

<div {...getTabPanelProps({ index: 0, item: 'tab 1' })} />

ryanseddon

const { 
  selectedItem, 
  focusedItem, 
  getTabProps, 
  getTabListProps, 
  getTabPanelProps 
} = useTabs();

ryanseddon

function TabContainer({ children, render = children, ...options }) {
  return render(useTabs(...options); 
}