⚙ @rbxts/topbar-components

Topbar Components is a react component package that mimics topbar-plus for Roblox-TS, with JSX markup support.

📦 Installation

@rbxts/topbar-components is available on NPM and can be installed with the following commands:

npm install @rbxts/topbar-components
yarn add @rbxts/topbar-components
pnpm add @rbxts/topbar-components

⚡ Quick Start

Instantiate <TopbarProvider /> to be a root of your topbar component tree.

<TopbarProvider>
    <Icon text="Hello, World!" />
</TopbarProvider>

Every <Icon /> can be in only two states selected, and deselected. You can conditionally apply properties based on icon's current state, by providing a state markup object:

<Icon text={{
    selected: "Selected!",
    deselected: "Deselected!",
}} />

You can add a dropdown to an icon by mounting <Dropdown /> component as it's child: Dropdowns & TopbarProvider have a property called selectionMode, which lets you specify how many icons can be selected at once.

<Icon text="Skins">
    <Dropdown selectionMode="single">
        <Icon text="yellow" selected={() => chooseSkin("yellow")} />
        <Icon text="red" selected={() => chooseSkin("red")} />
    </Dropdown>
</Icon>

Dropdowns can be nested.

🎨 Stylesheets

You can use stylesheets to override default properties of all components within: Stylesheets are partial, and work like patches to already established default properties within the package:

<Stylesheet stylesheet={{
    icon: {
        textSize: 25,
        cornerRadius: new UDim(0.5, 0),
    }
}}>
    <Icon text="Skins">
        <Dropdown selectionMode="single">
            <Icon text="yellow" selected={() => chooseSkin("yellow")} />
            <Icon text="red" selected={() => chooseSkin("red")} />
        </Dropdown>
    </Icon>
</Stylesheet>

📝 License

Package is licensed under the MIT License.