Using Paperclip In React Apps


To use Paperclip in React, you'll need to install the compiler first:

npm install paperclip-compiler-react --save-dev

Then in your paperclip.config.json file, change to look like:

"compilerOptions": {
"name": "paperclip-compiler-react"
"sourceDirectory": "./src"

After that you're good to go! From there you can start importing UI files into your app by either using Webpack, or by using the CLI tool to generate JavaScript files.

Importing *.pc files#

Think of *.pc files like any other JavaScript file. Just import them directly like so:

// 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 ui 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 <ui.Container onClick={onClick}>

☝🏻 This example uses the following Paperclip UI file:

.Container {
font-family: Helvetica;
cursor: pointer;
.CurrentCount {
font-weight: 400;
<!-- Components -->
<div export component as="Container" className="Container">
Current count: {children}
<div export component as="CurrentCount" className="CurrentCount">
<!-- Previews -->

Note that in order to import components from Paperclip files, they'll each need their own export attribute.


Styles defined in *.pc files are scoped, so if you want access to one of those styles outside of that file, you'll need to use classNames.


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

Note that you need to explicitly export classname-defined-in-paperclip within your Paperclip document using @export, otherwise it's not accessible.


@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?}>

The ? in {onClick?} flags the prop as optional.

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

import * as styles from "./button.pc";
<styles.Button onClick={handleClick} />