Skip to main content

Using Paperclip In React Apps

After building your Paperclip files, you can import them just as regular JavaScript modules. For example:

// I like to keep all of the styles in a single namespace
// to communicate that `ui.ComponentName` is a primitive comming from
// a Paperclip file.
import * as styles from "./counter.pc";

// Another option
// import * as styles from "./counter.pc";

import React, { useState } from "react";

export default () => {
const [currentCount, setCount] = useState(0);
const onClick = () => setCount(currentCount + 1);
return <styles.Container onClick={onClick}>

☝🏻 This example uses the following Paperclip UI file:

@frame { visible: false }
<div export component as="Container">
font-family: Helvetica;
cursor: pointer;
Current count: {children}

@frame { visible: false }
<span export component as="CurrentCount">
font-weight: 600;

@frame { title: "Demo" }


You can import class names that are exported from PC files (using @export).


import * as styles from "./counter.pc";
<div className={styles.classNames["classname-defined-in-paperclip"]} />

here'x how you expose classes for JavaScript usage:


@export {
.my-style {
color: red;

Adding props

Props can be defined just like any ordinary React component. Take this template for example:

<div export component as="Button" {onClick?}>

In React code, we can define our onClick handler like so:

import * as styles from "./button.pc";

<styles.Button onClick={handleClick} />


You can easily theme React components by exposing styles as a prop on your component. For example:

import * as defaultStyles from "./GroceryList.pc";

export type GroceryListProps = {
styles?: Partial<typeof defaultStyles>,
items: string[]

export function GroceryList({ items, styles: styleOverrides = {} }: GroceryListProps) {
const styles = {...defaultStyles, ...styleOverrides};

return (
{ => (

Then, to override these styles, just override the base styles like so:

<import src="./GroceryList.pc" as="GroceryList" />

<GroceryList.ListItem export component as="ListItem">
color: blue;

All that's left is to set these styles on a JSX component:

// Main JSX component
import { GroceryList } from "./GroceryList";

// Custom styles to define
import * as groceryListStyles from "./CustomGroceryList.pc";

<GroceryList items={["Milk", "Eggs", "Ham"]} styles={groceryListStyles} />


This is a basic example that uses React, and Webpack. Source code can be found here: