convertkit-react - GitLite

KO | EN

gitlite — search

#postgresql #golang #proxy #generative-ai #claude #html #mcp #macos #ios #rag

convertkit-react

(★ 46)

React-based library to easily plug ConvertKit forms to your React applications

파일 탐색기

ZIP 다운로드

- - node.js.yml
- FUNDING.yml
- convertkit-react.cjs.js
- convertkit-react.esm.js
- - builtwith.css
  - index.js
- - minimal.js
- .babelrc
- form.js
- index.js
- use-script.js
- use-template.js
- warning.js
- convertKit-react.png
- embed-screenshot.png
- index.test.js
- styleMock.js
.editorconfig
.gitignore
babel.config.cjs
CHANGELOG.md
jest.config.json
package-lock.json
package.json
publish.sh
README.md
ROADMAP.md
rollup.config.js

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`yarn`

설명 보기 ▼

JavaScript 및 Node.js 패키지 대체 관리자.
더 많은 정보: <https://yarnpkg.com/cli>.

yarn global add {{module_name}}

전역적으로 모듈 설치:

yarn install

`package.json` 파일에 참조된 모든 의존성을 설치 ( `install`은 선택 사항입니다):

yarn add {{module_name}}@{{version}}

모듈을 설치하고 `package.json` 파일에 대한 의존성으로 저장 (개발 전용 의존성으로 추가하려면 `--dev` 추가):

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>ConvertKit React</h1>
  <img src="https://raw.githubusercontent.com/ConvertKit/convertkit-react/main/static/convertKit-react.png" alt="ConvertKit React Logo" width="200" height="126" />
  <p>Easily plug convertkit forms to your React and Gatsby websites.</p>
</div>

Using Vue? Try [ConvertKit-Vue](https://github.com/ConvertKit/convertkit-vue)

Using Svelte? Try [ConvertKit-Svelte](https://github.com/ConvertKit/convertkit-svelte)

## Setup

```sh
yarn add convertkit-react
```

## Demos

View examples on [how to use different templates here](https://codesandbox.io/s/twilight-cookies-ihryz) and [how to style your form with custom styling here](https://codesandbox.io/s/nifty-fog-f8eys)

## Usage

```jsx
import ConvertKitForm from 'convertkit-react'

const MY_FORM_ID = 1234567

function HomePage() {
  return (
    <ConvertKitForm formId={MY_FORM_ID} />
  )
}
```

To get your form id, go to the form you have created on convertkit and choose the HTML embed option.

![form embed screenshot](https://raw.githubusercontent.com/ConvertKit/convertkit-react/main/static/embed-screenshot.png)

Here you'll pick out your form id from the form action in the embed code:

```html
<form
  action="https://app.convertkit.com/forms/YOUR_FORM_ID_IS_HERE/subscriptions"
></form>
```

#### Passing custom configuration options

```jsx
function HomePage() {
  const config = {
    formId: MY_FORM_ID,
    template: 'mills',
    emailPlaceholder: 'Enter an email address',
    submitText: 'Sign up',
  }

return (
    <ConvertKitForm {...config} />
  )
}
```

#### Configuration Options

|   **Property**   |   **Type**   |      **Default**     |    **Description**   |
| ---------------- | ------------ | -------------------- | -------------------- |
|     format       |   `String`   |        inline        | inline, modal, slidein, sticky   |
|     template     |   `String`   |       minimal        | _Templates in the app + minimal_ |
|    submitText    |   `String`   |      Subscribe       | Text shown in submit button      |
|    headingText   |   `String`   |  Varies per template | Text shown in heading   |
|  disclaimerText  |   `String`   |  Varies per template | Text shown in disclaimer area    |
| emailPlaceholder |   `String`   |      Your email      | Placeholder for email input      |
| namePlaceholder  |   `String`   |   Your first name    | Placeholder for first name input |
|    nameLabel     |   `String`   |      First name      | Custom name label                |
|    emailLabel    |   `String`   |         Email        | Custom email label               |
|    showLabels    |  `Boolean`   |        `false`       | Shows labels with form inputs or only rely on `aria-label`   |
|     hideName     |  `Boolean`   |        `false`       | Hides the name input field       |
|     newTab       |  `Boolean`   |        `false`       | Determines if form should be processed in new tab or current |
|      stack       |  `Boolean`   |        `true`        | Determines if inputs are stacked or placed inline            |
|   hideWarnings   |  `Boolean`   |        `false`       | Hide warnings that are shown due to misconfiguration         |
|   backgroundImage   |  `String`   | default on template | Use a different background image for your form |
|   backgroundOpacity   |  `Number`   |  0.8   |  Opacity here is the inverse of what is on the app which really measures transparency  |
|   buttonBackground   |  `String`   |  Varies per template   |  A [valid CSS color][1] string  |
|   buttonColor   |  `String`   |  Varies per template   |  A [valid CSS color][1] string  |

##### Templates
The minimal template has no preconfigured styling, leaving you options to style
as desired. To get a preconfigured style, use one of the app templates
(clare, mills, rainier, powell etc) as seen on the app.

##### Content
To change the subheader (sometimes referred to as content) you may just add children
inside the `<ConvertkitForm>` component like below:

```jsx
<ConvertKitForm {...config}>
  <p>Subscribe to get our latest content by email.</p>
</ConvertKitForm>
```

## Contributing
To publish a package:

```sh
./publish X.X.X "Message about version"
```

where `X.X.X` is the version number.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value