Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anvilco/react-ui
React E-Sign UI components by Anvil
https://github.com/anvilco/react-ui
e-sign e-signature javascript react styled-components
Last synced: about 3 hours ago
JSON representation
React E-Sign UI components by Anvil
- Host: GitHub
- URL: https://github.com/anvilco/react-ui
- Owner: anvilco
- License: mit
- Created: 2020-11-09T23:37:24.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T20:18:27.000Z (7 months ago)
- Last Synced: 2024-11-08T02:39:45.532Z (11 days ago)
- Topics: e-sign, e-signature, javascript, react, styled-components
- Language: JavaScript
- Homepage: https://www.useanvil.com/docs
- Size: 737 KB
- Stars: 17
- Watchers: 8
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: changelog-template.hbs
- License: LICENSE.md
Awesome Lists containing this project
README
# Anvil React UI Components
This repo contains multiple React components used to embed [Anvil E-signatures](https://www.useanvil.com/docs/api/e-signatures), [Workflows](https://www.useanvil.com/docs/api/workflows#embedding-workflows-in-your-app), and editors into your app or website. Pick and choose the component that best suits your use case, integrate it into your code, and the components will take care of the rest.
The following components will embed the Anvil product in an `iframe` within your app or website. To enable, go to your organization's settings in Anvil, and enable "Iframe Embedding" in the API section. Test `EtchPackets` [created with `isTest: true`](https://www.useanvil.com/docs/api/e-signatures#testing-your-packet-configuration)and `Workflow submissions` are embeddable without contacting us.
* [AnvilEmbedFrame](#AnvilEmbedFrame) - an `iframe` component with a simple `onEvent` callback for embedding Etch e-sign, Workflows, or editors.
* [AnvilSignatureModal](#AnvilSignatureModal) - a modal popup window component with lifecycle callbacks for embedding Anvil e-signatures.
See the [live demo](https://esign-demo.useanvil.com/) and open-source [demo repository](https://github.com/anvilco/anvil-e-signature-api-node-example) for a usage example of `AnvilEmbedFrame` and `AnvilSignatureModal`.
## What is Anvil?
[Anvil](https://www.useanvil.com/developers) provides easy APIs for all things paperwork.
1. [PDF filling API](https://www.useanvil.com/products/pdf-filling-api/) - fill out a PDF template with a web request and structured JSON data.
2. [PDF generation API](https://www.useanvil.com/products/pdf-generation-api/) - send markdown or HTML and Anvil will render it to a PDF.
3. [Etch E-sign with API](https://www.useanvil.com/products/etch/) - customizable, embeddable, e-signature platform with an API to control the signing process end-to-end.
4. [Anvil Workflows (w/ API)](https://www.useanvil.com/products/workflows/) - Webforms + PDF + E-sign with a powerful no-code builder. Easily collect structured data, generate PDFs, and request signatures.
Learn more on our [Anvil developer page](https://www.useanvil.com/developers).
## AnvilEmbedFrame
A very minimal component that allows you to embed Anvil into your app with an `iframe`. It will give you information via the `onEvent` callback.
### Usage
See the [AnvilEmbedFrame README](./packages/anvil-embed-frame/README.md) for full details.
```sh
yarn add @anvilco/anvil-embed-frame
```
```sh
npm install @anvilco/anvil-embed-frame
```
```js
import AnvilEmbedFrame from '@anvilco/anvil-embed-frame'
console.log('Event object:', event)}
className="anvil-embed-frame"
/>
```
## AnvilSignatureModal
A minimal modal component that allows you to embed Anvil e-signatures via a modal popup in your app. It will give you information via callbacks through the signing process lifecycle. Compatible with mobile viewports with minimal dependencies.
### Usage
See the [AnvilSignatureModal README](./packages/react-signature-modal/README.md) for full details.
```sh
yarn add @anvilco/react-signature-modal
```
```sh
npm install @anvilco/react-signature-modal
```
```js
import AnvilSignatureModal from '@anvilco/react-signature-modal'
import '@anvilco/react-signature-modal/dist/styles.css'
setIsModalOpen(false)}
onLoad={() => setLoading(false)}
onEvent={(eventObject) => console.log(eventObject)}
/>
```
## Links 🔗
* [@anvilco/anvil-embed-frame](https://www.npmjs.com/package/@anvilco/anvil-embed-frame)
* [@anvilco/react-signature-modal](https://www.npmjs.com/package/@anvilco/react-signature-modal)
* [Getting started with Anvil API](https://www.useanvil.com/docs/api/getting-started)
* [Anvil e-signature API docs](https://www.useanvil.com/docs/api/e-signatures)
## Notes
* Please contact us at [[email protected]](mailto:[email protected]) to enable iframe embedding for editors.
* React >= v16.0 required.
## Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
## Questions or Feedback
Please email us at [[email protected]](mailto:[email protected]).
## License
MIT