Skip to content

Instantly share code, notes, and snippets.

View refs.jsx
const tooltipRef = React.useRef(null);
const { isVisible, getTooltipProps, getTriggerProps } = useTooltip({
tooltipRef
});
// render
<div
{...getTooltipProps({
ref: tooltipRef
})}
View useTooltip.jsx
<button {...getTriggerProps({ onMouseEnter: e => e.preventDefault() })}>
Trigger
</button>
View TabsContainerClass.jsx
class Tabs extends React.Component {
render() {
return (
<TabsContainer vertical={true}>
{({
selectedItem,
focusedItem,
getTabProps,
getTabListProps,
getTabPanelProps
View rtlTabs.js
const {
selectedItem,
focusedItem,
getTabProps,
getTabListProps,
getTabPanelProps
} = useTabs({ rtl: true });
View verticalTabs.js
const {
selectedItem,
focusedItem,
getTabProps,
getTabListProps,
getTabPanelProps
} = useTabs({ vertical: true });
View getTabProps.jsx
<button {...getTabProps({
item: 'tab 1',
index: 0,
focusRef: React.createRef(null)
})>
tab 1
</button>
View getTabPanelProps.jsx
<div {...getTabPanelProps({ index: 0, item: 'tab 1' })} />
@ryanseddon
ryanseddon / TabHook.js
Created Jun 18, 2019
Part of blog post
View TabHook.js
const {
selectedItem,
focusedItem,
getTabProps,
getTabListProps,
getTabPanelProps
} = useTabs();
@ryanseddon
ryanseddon / TabContainer.js
Created Jun 18, 2019
Part of a blog post
View TabContainer.js
function TabContainer({ children, render = children, ...options }) {
return render(useTabs(...options);
}
View keybase.md

Keybase proof

I hereby claim:

  • I am ryanseddon on github.
  • I am ryanseddon (https://keybase.io/ryanseddon) on keybase.
  • I have a public key ASALcuRRJgjeiZhwtUQauzfB3JG1vWS0cymBniHrjspJ7wo

To claim this, I am signing this object: