Using Paperclip In React Apps

Installation

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 compilerOptions.name 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}>
<ui.CurentCount>{currentCount}</ui.CurrentCount>
</ui.Container>;
};

☝🏻 This example uses the following Paperclip UI file:

main.pc
⚡️ Preview

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

classNames

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.

Syntax

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.

Example

<style>
@export {
.my-style {
color: red;
}
}
</style>

Adding props

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

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

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} />