1. Installation
Add NPM Package
To add Looker UI Components to your project, add the NPM package to your project:
# Looker projects generally utilize Yarn (https://yarnpkg.com/)yarn add @looker/components styled-components react react-dom lodash# If you prefer you can of course also use NPM directly:npm install @looker/components styled-components lodash
Using Typescript?
If you're using Typescript you'll also need to add the type definitions for Styled Components.
yarn add --dev @types/styled-components @types/react @types/react-dom @types/styled-system
Unfortunately, due to this issue with the type definitions for Styled Components you'll need to apply a minor workaround if you're using ESLint along with Styled Component's Typescript definitions.
rm -R node_modules/@types/react-nativeecho '@types/react-native' > .yarnclean
Setup
@looker/components
expects two prerequisites to exist for the complete styling to be applied:
Web Font Loading
Users may not have the @looker/components
default font, Roboto, installed on their computers so we recommend importing the font to ensure that content is rendered with the proper font-face.
The <GoogleFontsLoader />
component will automatically load any fonts specified in the theme from Google Fonts if they're not already available on the device. This can also be done by adding the loadGoogleFonts
prop on ComponentsProvider
<ComponentsProvider loadGoogleFonts>...</ComponentsProvider>
Using a Component
Now that we have @looker/components
installed we can start using them in our application. To get things started import some components:
import { Card, ComponentsProvider, theme } from '@looker/components'<ComponentsProvider><Card>{Source here...}</Card></ComponentsProvider>
Which could be used to render the following:
Welcome to Looker Components
Looker's component library<Card raised><CardContent><Heading fontWeight="semiBold" textTransform="capitalize">Welcome to Looker Components</Heading><Text>Looker's component library</Text></CardContent></Card>
Try editing the code above, you should see the changes appear live.
These live editing blocks are found throughout our style guide documentation, providing a space for rapid experimentation with components.