Available tabs events?

[gouku]

Does Tabs has any event available? So I can trigger other functions when specific tab shown or hidden.

Like how I did with Bootstrap:

tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})

[lex111]

No, tabs don't emit custom events, so if you want to change its behavior, you need to swizzle Tabs component .

[gouku]

Thanks for replying. Just learned how to swizzle and customize components. I know some JavaScript but pretty new to React. Any guide how to emit custom events for React components? Thanks!

[Josh-Cena]

The React way is actually to pass the behavior into Tabs as a callback:

// Tabs.js
function Tabs(props) {
  const handleTabChange = (event) => {
    // ...
    props.onTabChange();
  }
  // ...
}

// your-page.{md,js}
<Tabs onTabChange={() => console.log("Tabs changed")} />
// ...

If you absolutely need to emit events, do it in the old way with DOM:

function Tabs(props) {
  const ref = React.createRef();
  const handleTabChange = (event) => {
    // ...
    ref.current?.dispatchEvent(new Event('tabChange'));
  }
  return (
    <div ref={ref}>
       {/* the component */}
    </div>
  )
}

(Hope the latter works, correct me if it doesn't)

[gouku]

Thanks! The first approach just works for me!