Getting started questions

[ccorcos]

Hey there, I'm just getting started with Radix-UI and after reading through the documentation, I have a few questions

1. Is there a way to lazily render tabs? Sometimes, a tab view is expensive to render or has to make network requests to load, so its nice to be able to render them lazily.
2. Same question with context menus. In Notion, for example, if you right click on a block, there's a decent amount of computation that goes on in order to figure out what kinds of actions can be taken on that block. So it would be nice to be able to lazily populate context menus as well.
3. If I just want some text with an icon next to it, what's the best way of doing that? For example, the a tab heading or a badge with an icon.

I hope this is an appropriate place to put this.

Thanks!

[jd-carroll]

As a newbie myself, not sure I have the exact answer, but...

I would think that is out of scope for Radix and more an issue for the framework you are using.

Personally, I am using Next.JS and I would use their dyanmic utility which uses react suspense boundaries

[triptu]

1. the usual conditional rendering in React should work.
2. Same as above
3. Not sure about the best, a flex with a text and icon inside it works well for standalone cases. For tab heading and such which are internally buttons you can just follow the Button docs.

[ccorcos]

So how does conditional rendering look in this example? I'm not sure we even have access to the state...

https://www.radix-ui.com/primitives/docs/components/tabs

import React from 'react';
import * as Tabs from '@radix-ui/react-tabs';
import './styles.css';

const TabsDemo = () => (
  <Tabs.Root className="TabsRoot" defaultValue="tab1">
    <Tabs.List className="TabsList" aria-label="Manage your account">
      <Tabs.Trigger className="TabsTrigger" value="tab1">
        Account
      </Tabs.Trigger>
      <Tabs.Trigger className="TabsTrigger" value="tab2">
        Password
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content className="TabsContent" value="tab1">
      <p className="Text">Make changes to your account here. Click save when you're done.</p>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="name">
          Name
        </label>
        <input className="Input" id="name" defaultValue="Pedro Duarte" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="username">
          Username
        </label>
        <input className="Input" id="username" defaultValue="@peduarte" />
      </fieldset>
      <div style={{ display: 'flex', marginTop: 20, justifyContent: 'flex-end' }}>
        <button className="Button green">Save changes</button>
      </div>
    </Tabs.Content>
    <Tabs.Content className="TabsContent" value="tab2">
      <p className="Text">Change your password here. After saving, you'll be logged out.</p>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="currentPassword">
          Current password
        </label>
        <input className="Input" id="currentPassword" type="password" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="newPassword">
          New password
        </label>
        <input className="Input" id="newPassword" type="password" />
      </fieldset>
      <fieldset className="Fieldset">
        <label className="Label" htmlFor="confirmPassword">
          Confirm password
        </label>
        <input className="Input" id="confirmPassword" type="password" />
      </fieldset>
      <div style={{ display: 'flex', marginTop: 20, justifyContent: 'flex-end' }}>
        <button className="Button green">Change password</button>
      </div>
    </Tabs.Content>
  </Tabs.Root>
);

export default TabsDemo;

[triptu]

The primitive's doc should be helpful - https://www.radix-ui.com/primitives/docs/components/tabs
You can either use it in a controlled way(with onValue and onValueChange) or use an attribute selector based on data-state as present in the doc.

[ccorcos]

1. Ah, the Tabs primitive is almost exactly the same as Tabs in Theme but the theme one doesn't have the value/onChangeValue (or at least isn't present in the documentation). That's exactly what I needed.

2. Also just need to use the primitives ContextMenu prop onOpenChange.

3. Sounds like the answer is just "do your own css for this" which is totally fine honestly.

[triptu]

yes, all components are built on top of the primitives. Another good aspect of this is that you can also copy over from shadcn which are built on the same primitives for more components. Might need to alias the css variables first though in terms of radix themes variables.

[joaom00]

@ccorcos the content inside Tabs.Content is not rendered until the tab is active and unmounted when not. If you want something like "Don't mount at first but keep mounted after that", there is currently no such option, but there is already a discussion about it, see radix-ui/primitives#855 (reply in thread) and radix-ui/primitives#1155