We're going to build a "save to reading list" feature for the website.
We will need a few things to get started. First, we need to install the React UI Kit. This guide assumes you have a Next.js project set up.
npm install @stitches/react npm install @washingtonpost/wpds-ui-kit
Let's configure the project to support Server Side Rendering. This is a requirement for the React UI Kit in Next.js. We are following Stitches guide on how to do this. Seen here.. You need to call ‘getCssText()’ in the document head to prevent FOUC during SSR.
Create a new component file in your "components" directory with the following code:
Let's walk through each line of code. We will be using the
styled function to create a styled component. We will also be using the
theme object to get the current theme. We will also be using the
Icon component to create an accessible icon.
styled function takes a component and returns a styled component. It uses Stitches under the hood.
theme object lets us use our Theme tokens with type safety. We can also use the cool "interpolation" syntax to get the current theme. Like so
$primary will return the current primary color.
Icon component clones the SVG React element and adds accessibility attributes. We can use the
label prop to set the
aria-label attribute. We can also use the
size prop to set the
We will use a new asset from our Assets Manager.
Let's create a new button component with the following code. We will use the
Icon asset and apply the
fill prop to set the color.