https://github.com/libreform/react-component
React component for WP Libre Form
https://github.com/libreform/react-component
Last synced: 3 months ago
JSON representation
React component for WP Libre Form
- Host: GitHub
- URL: https://github.com/libreform/react-component
- Owner: libreform
- License: mit
- Created: 2018-07-22T16:28:14.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T20:21:49.000Z (over 3 years ago)
- Last Synced: 2026-03-22T22:24:19.113Z (3 months ago)
- Language: JavaScript
- Size: 1.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React component for WP Libre Form
[![Travis][build-badge]][build]
[![npm][npm-badge]][npm]
React component for WP Libre Form. Depends on @libreform/libreform, which is NOT bundled with the package, you have to install it yourself.
# Installation
`npm install @libreform/react-component`
If you're feeling wild, you can also drop this repository under your plugins folder and activate the plugin. The component will be available under `window.WPLFReactComponent`. Please note that using it this way will enqueue react on every page.
# Usage
Like any other component. Should work just like WPLF works without React. If you need access to the dom node, you can create a ref with `useRef()` and pass it into the component as property.
```
import LibreForm from '@libreform/react-component'
function Demo() {
const ref = useRef(null)
return
Demo
}
```
# Props
Only `form` is required.
```typescript
{
form: string | number // form id or slug
className?: string // optional custom class name
parentRef?: React.RefObject // optional React ref
referrerData?: ReferrerData // optional object used for the referrer of the sub
IfErrors?: typeof Errors // react component
WhileLoading?: typeof Loading // react component
callbacks?: {
// List of callbacks to ADD on the form.
// Does NOT remove existing callbacks such as form reset and success message.
[x: string]: List
}
}
```
# Dependencies
- react
- @libreform/libreform
# Gotchas
This is just a dangerouslySetInnerHTML wrapper & bindings for WPLF. There's no sanitation. You should know the risks of unrestricted HTML.
[build-badge]: https://img.shields.io/travis/libreform/react-component/master.png?style=flat-square
[build]: https://travis-ci.org/libreform/react-component
[npm-badge]: https://img.shields.io/npm/v/@libreform/react-component.png?style=flat-square
[npm]: https://www.npmjs.org/package/@libreform/react-component
[coveralls-badge]: https://img.shields.io/coveralls/libreform/react-component/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/libreform/react-component