Automatic platform detection for tabs?

[ilg-ul]

In the Install Guide page I use the <Tabs> component with 3 platform specific <TabItem> (Windows/macOS/GNu/Linux).

Everything is fine, the multiple <Tabs groupId="operating-systems"> ... </Tabs> are rendered correctly and the selection is synchronised to all instances.

As a further improvement, I would like to automatically configure the default selection to match the platform the web page is accessed from.

Any idea how to do it? (Sorry, my experience with client side JS is poor)

[OzakIOne]

I guess it may be possible by swizzling the tab component and detecting the platform in the useragent

import React, { useState, useEffect } from 'react'
import TabItem from '@theme-original/TabItem'

const isMacintosh = () => navigator.userAgentData.platform === 'macOS'
const isWindows = () => navigator.userAgentData.platform === 'Windows'
const isLinux = () => navigator.userAgentData.platform === 'Linux'

export default function TabItemWrapper(props) {
  const [defaultTab, setDefaultTab] = useState(null)

  useEffect(() => {
    if (isMacintosh()) setDefaultTab('apple')
    else if (isWindows()) setDefaultTab('windows')
    else if (isLinux()) setDefaultTab('linux')
  }, [])
  const isDefault = props.value === defaultTab

  return <TabItem {...props} hidden={isDefault ? false : true} default={isDefault ? true : undefined} />
}

And then default select the tab depending on the platform (no idea on how to do this)
I'll try to do it in a sandbox

Edit: the default value seems a bit buggy in this implementation I don't know why

[Josh-Cena]

And then default select the tab depending on the platform (no idea on how to do this)

Something like defaultValue={detectPlatform()} should work. I remember we made a change to specifically enable this use case but I can't find it now.

[slorber]

The React Native website uses something like this:

• https://github.com/facebook/react-native-website/blob/6dd23834fc0e0d3eee1c35e4abb4194105a7f54b/website/core/TabsConstants.js
• https://github.com/facebook/react-native-website/blob/6dd23834fc0e0d3eee1c35e4abb4194105a7f54b/docs/set-up-your-environment.md?plain=1#L33

But in my experience, this leads to React hydration mismatches because the selected tab at build time does not match the selected tab at hydration time.

So unless you don't care about React hydration errors, or know what you are doing, I'd recommend avoiding implementing this. Tabs

What we might consider adding is either the ability to have "controlled tabs" (ie tabs state is managed externally) or exposing an imperative API so that you can select the

For example:

function MyOSTabs(}
  const ref = useRef();
  useEffect(() => ref.current.selectTab(detectOS()),[])
  return <Tabs ref={ref}/>
} 

What's important here is that the displayed tab at build time (SSG) and hydration (first React render in the browser) are the same. After hydration (in useEffect) it's fine to "switch the tab" to whatever you want.

Note that if you use a groupId to persist the selected tab in localStorage, we only "restore" the selected tab after React hydration, and if we refresh the page you might not initially see the last selected tab being the one rendered.

This means that even though we don't provide a first-class API for that, you can probably store the os value you want in localStorage by initializing it in a client module, so that once the Tabs code run, it will "restore" that os tab properly, without causing any hydration issues.

To make all this simpler, we could also expose an API like:

<Tabs 
  defaultValue="windows" // Used for SSG/Hydration (what users see first)
  defaultValueClient={() => detectOS()} // Makes Tabs switch to the appropriate OS tab after hydration
/>

[ilg-ul]

Thank you for the explanation.

If I understand it right, there is no ready to use solution for the moment, but you are thinking on what might be a good one.

If so, I'll probably wait for it.

[Josh-Cena]

But in my experience, this leads to React hydration mismatches because the selected tab at build time does not match the selected tab at hydration time.

I thought we had a PR that remounts the tab on first CSR to work around it, or maybe it was a react-native-website specific workaround.

[slorber]

I thought we had a PR that remounts the tab on first CSR to work around it, or maybe it was a react-native-website specific workaround.

I don't remember any of that 😅

---

Looks like we already have an issue dedicated to this problem + a dogfood test case:

• Feature: Tabs dynamic defaultValue #5653
• https://docusaurus.io/tests/pages/tabs-tests#tabs-with-dynamic-default-value

Let's move the discussion to the dedicated issue instead