Programatically select specific tab?

[dprothero]

We have a CH.Code with multiple code samples to be rendered as tabs. We are using each tab for a particular programming language:

What I'd like to do is pre-select a tab based on a previously saved programming language preference. I've tried wrapping the Code component to experiment like so:

const TwilioCode = (props: CodeProps) => {
  const { codeLanguage, setCodeLanguage } = useContext(DocsContext);
  props.northPanel.active = codeLanguage;

  const handleClick = () => {
    console.log('boop');
    setCodeLanguage('Java');
    props.northPanel.active = 'Java';
  };
  return (
    <>
      <button type="button" onClick={handleClick}>
        Boop
      </button>
      <CH.Code {...props} />
    </>
  );
};

It renders properly, but there doesn't seem to be a way to make the selected tab change.

In addition, I will need to be able to save their preference if they change tabs.

Any ideas?

[pomber]

There's no good way of doing that currently. But I'm working on v1.0 and the idea is to include a built-in switcher for that use case.

Also, if you have more feature requests this is a great time to bring them up :)

[stern-shawn]

Looking forward to it!

We're currently hacking around it with useEffect, watching for click events on the tabs based on their title and data-ch-tab attributes, and doing synthetic clicks on other matching tabs in response. It works, but it'd feel much nicer to update a prop instead 😄

[pomber]

I was going to suggest something like that but discarded it as too hacky 😆

[stern-shawn]

Haha, extremely hacky and not terribly performant with many samples on a page... 😅
We'd be happy to collaborate on a change depending on where the work for v1 is at currently 😃

[pomber]

Here is one example of the switcher with v1 (work in progress): https://v1-outpost.vercel.app/api-reference.
Code is here: code-switcher.tsx

Some questions for you, is the thing you are building open source? are you using React Server Components? are you interested in early access to Code Hike v1?

[stern-shawn]

• We are still using the pages router for now; the site is a mix of SSG and ISR based on next-mdx-remote for context (so all content is purely MDX and we cannot use typical component imports). RSC may make sense in the future!
• The project currently isn't open source as it's the new docs platform for Twilio.

@dprothero this is pretty neat!