npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-paperform-co

v1.0.1

Published

Paperform.co components for react with types

Downloads

625

Readme

react-paperform-co

npm version

A React component for embedding Paperform forms.

Installation

npm install react-paperform-co
or
yarn add react-paperform-co

Usage

Embedded

import { PaperformEmbedded } from 'react-paperform-co';

export default function App() {
    return (
        <PaperformEmbedded
            paperformId="contact-paperform"
            prefill={{
                '9cqkm': 'Danny'
            }}
            prefill-inherit
            spinner
            onPageChange={(...a) => console.log('onPageChange!', a)}
            onSubmit={(...a) => console.log('onSubmit!', a)}
        />
    );
}

Popup

import { PaperformPopup } from 'react-paperform-co';

export default function App() {
    return (
        <PaperformPopup
            paperformId="contact-paperform"
            prefill={{
                '9cqkm': 'Danny'
            }}
            prefill-inherit
            onSubmit={(...a) => console.log('onSubmit!', a)}
            onClose={() => console.log('onClose!')}
        />
    );
}

API

Table of Contents

PaperformEmbedded

Renders a paperform embedded form

Parameters

PaperformPopup

Renders a paperform popup

Parameters

PaperformSubmissionDataItem

Row of the fulled form data.

display_label

Type: string

key

Type: string

label

Type: string

raw

Type: string

scopes

Type: Array<string>

type

Type: string

value

Type: string

PaperformSubmission

The submission data is an array of objects, each representing a row of the form data.

data

The submission data is an array of objects, each representing a row of the form data.

Type: Array<PaperformSubmissionDataItem>

form_id

paperformId is the ID of the form.

Type: string

submission_id

The submission ID is a unique identifier for the submission.

Type: string

total

Type: 0

PaperformChangePageEvent

Event fired when the page of the form is changed.

form_id

paperformId is the ID of the form.

Type: string

currentPage

Type: number

totalPages

Type: number

PaperformProps

Base props for the Paperform components.

prefill

To use pre-filling directly through the element, you may pass hardcode values. For example, you might pre-fill UTM parameters here instead of placing them in the URL's query string.

Type: (Record<string, string> | string)

prefillInherit

To pre-fill a form by using the query string of the page it's embedded on, you may pre-fill by inheritance, setting this attribute on the element you're using to embed the form. This lets you dynamically pre-fill the form based on the current query string.

Type: boolean

scrollOffset

When changing pages on an inline, embedded form, the page is automatically scrolled to the top of the form.

However, if the page the form is embedded on has a fixed header or the form consistently sits lower on the page than the top, page changes may cause the scroll position to be lower than expected and may cause confusion for respondents as to where the form went.

Setting the scroll-offset to a number of pixels offsets what is considered the "top" and enables page changes to more reliably alter the scroll position to where it needs to be.

Type: number

noScroll

When changing pages on an inline, embedded form, the page is automatically scrolled to the top of the form.

If you want to disable this behavior entirely, you can set no-scroll equal to "1".

Type: boolean

spinner

Use this to include a spinner (loading indicator) while the form is loading.

Type: boolean

lazy

Delay loading an inline, embedded form until the form has scrolled into view on the screen.

Type: boolean

height

This attribute applies to guided mode only.

The height of the embedded form may be restricted to a specific height. The value can be any valid CSS unit (px, %, em, rem, vw, vh, ...).

This is commonly used to reduce the amount of space a guided mode form takes, including the spacing between the centered form content and any buttons.

The height may never be larger than the viewport.

Type: string

border

Show a border around an inline, embedded form.

Type: boolean

borderColor

Change the color of the border around an inline, embedded form. The color value can be any valid CSS color. If the border attribute is not present, this attribute will not do anything.

Type: string

onSubmit

Fires when the form is submitted, including the submission data.

Type: function (submission: PaperformSubmission): void

onPageChange

Fires when the page changes in a form, including the currentPage and totalPages in each response.

Type: function (event: PaperformChangePageEvent): void

title

Set the title of the embedded form's iframe.

This can be useful for accessibility purposes.

Type: string

dev

Unknown dev attribute.

Type: string

PaperformEmbeddedProps

Extends PaperformProps

Props for the Paperform embedded form.

paperformId

The ID of the form to embed.

Type: string

PaperformPopupProps

Extends Pick<PaperformEmbeddedProps, 'paperformId' | 'spinner' | 'dev' | 'prefill' | 'prefillInherit' | 'onSubmit'>

Props for the Paperform popup form.

onClose

Callback function to be called when the popup is closed by user.

Does not fire when the popup component was removed by the parent component.

Type: function (): void

License

MIT