- Notifications
You must be signed in to change notification settings - Fork1
A collection of React Components that make up the PickUp world. 🌎⚡
PlayPickUp/pickup-ui
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A collection of packages that make up the PickUp component universe.
yarn add @playpickup/core @playpickup/icons## or if npm is your jamnpm install @playpickup/core @playpickup/icons --saveBelow is a quick start guide on how to use theTypography component in a simple React app, with Typescript.
importReactfrom"react";importReactDOMfrom"react-dom";import{ThemeProvider,Typography}from"@playpickup/core";constApp:React.FC=()=>(<div><ThemeProvider><Typographyvariant="title">PlayPickUp!</Typography></ThemeProvider></div>);constel=document.getElementById("root");ReactDOM.render(<App/>,el);
Be sure to include
ThemeProviderin your application. ThemeProvider should be included as far up the component tree as possible.
@playpickup/core usesreact-jss under the hood to style the components. We include these core methods in our package so you don't have to also includereact-jss in your project. Below is an example of how you would usecore to style a component. In this example,<ThemeProvider> is used at the top level of the application.
importReactfrom"react";import{ThemeProvider,createUseStyles,DefaultTheme}from"@playpickup/core";constuseStyles=createUseStyles((theme:DefaultTheme)=>({root:{display:"flex",position:"relative",backgroundColor:"red",color:theme.colors.primary,// you can access default theme styles like sofontSize:46,borderRadius:theme.borderRadius,padding:theme.spacing.base*2,// double the base spacing size FANCY EYYY?},}));constSuperStyledDiv:React.FC=({ children})=>{constclasses=useStyles();return(<divclassName={classes.root}>{children}</div>;)};constApp:React.FC=()=>{return(<ThemeProvider><SuperStyledDiv> I'm super styled!</SuperStyledDiv></ThemeProvider>);};
View it in action onCodesandbox
This library is still under active development and we cannot garauntee breaking changes won't be introduced. It is reccomended not to use this library in production outside of the PickUp ecosystem.
When updating snapshots useyarn test -u instead of directly using Jest to update
About
A collection of React Components that make up the PickUp world. 🌎⚡