Skip to content

Instantly share code, notes, and snippets.

Ryan Seddon ryanseddon

Block or report user

Report or block ryanseddon

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
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:

You can’t perform that action at this time.