npm.io
9.15.6 • Published 5d ago

@zendeskgarden/react-chrome

Licence
Apache-2.0
Version
9.15.6
Deps
6
Size
223 kB
Vulns
0
Weekly
0
Stars
1.1K
SummaryDependencyVersions

@zendeskgarden/react-chrome npm version

Collection of elements relating to the Chrome component within the Garden Design System

DEPRECATED
The Chrome components (including Body, Content, Header, Main, Nav) are deprecated for general use.

Installation

npm install @zendeskgarden/react-chrome

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usages

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Chrome, Nav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
import SupportIcon from '@zendeskgarden/icons/src/26/relationshape-support.svg';
import BrandmarkIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';

<ThemeProvider>
  <Chrome>
    <Nav isExpanded>
      <Nav.Item hasLogo product="support" title="Zendesk Support">
        <Nav.ItemIcon>
          <SupportIcon />
        </Nav.ItemIcon>
        <NavItemText>Zendesk Support</NavItemText>
      </Nav.Item>
      <Nav.List>
        <Nav.Item isCurrent>
          <Nav.ItemIcon>
            <HomeIcon />
          </Nav.ItemIcon>
          <NavItemText>Home</NavItemText>
        </Nav.Item>
      </Nav.List>
      <Nav.Item hasBrandmark>
        <Nav.ItemIcon>
          <BrandmarkIcon />
        </Nav.ItemIcon>
        <Nav.ItemText>Brandmark</Nav.ItemText>
      </Nav.Item>
    </Nav>
    <Body>
      <Header>...</Header>
      <Content>
        <Main>Lorem ipsum...</Main>
      </Content>
    </Body>
  </Chrome>
</ThemeProvider>;