Components
Getting started
Learn how to quickly get started with our component library to build expressive, consistent UI at Sprout.
Install the package
Sprout’s component library is called Racine, and it’s available on the npm
registry. You can install it using npm
or yarn
:
npm install @sproutsocial/racine react styled-components
yarn add @sproutsocial/racine react styled-components
You will also require the Seeds peer dependencies when starting a new project or sandbox environment:
@sproutsocial/seeds-border@sproutsocial/seeds-color@sproutsocial/seeds-depth@sproutsocial/seeds-motion@sproutsocial/seeds-networkcolor@sproutsocial/seeds-space@sproutsocial/seeds-typographymomentprop-typesreactreact-datesstyled-components
Once you’ve installed the package you can import any component available in Racine:
import { Box } from '@sproutsocial/racine'
Wrap your app in the theme provider
In order to propagate Racine’s theme to the components, you need to wrap your React app in Racine’s ThemeProvider component:
import { ThemeProvider } from '@sproutsocial/racine'
const WrappedApp = props => ( <ThemeProvider> <App {...props} /> </ThemeProvider>)
Using SVGs
In order to make use of any of our SVG components, you must ensure that the SVG sprite sheets are mounted to the DOM.
We’ve provided an example below of how to achieve this but feel free to mount the sprites in whatever manner best suits your needs.
// loadSVGAssets.js
import icons from "node_modules/@sproutsocial/racine/dist/icon.svg";import logos from "node_modules/@sproutsocial/racine/dist/logo.svg";import illustrations from "node_modules/@sproutsocial/racine/dist/illustration.svg";
if (typeof document !== "undefined") { const body = document && document.querySelector("body"); const iconsElement = document.createElement("div"); const logosElement = document.createElement("div"); const illustrationsElement = document.createElement("div"); iconsElement.innerHTML = icons; logosElement.innerHTML = logos; illustrationsElement.innerHTML = illustrations; const container = document.createElement("div"); container.style = "width: 0; height: 0; overflow: hidden;"; container.append(iconsElement.firstChild); container.append(logosElement.firstChild); container.append(illustrationsElement.firstChild); body.appendChild(container);}