{"id":20999797,"url":"https://github.com/anvilco/react-ui","last_synced_at":"2025-05-14T23:31:14.986Z","repository":{"id":39853016,"uuid":"311492397","full_name":"anvilco/react-ui","owner":"anvilco","description":"React E-Sign UI components by Anvil","archived":false,"fork":false,"pushed_at":"2025-04-21T21:34:24.000Z","size":760,"stargazers_count":18,"open_issues_count":2,"forks_count":2,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-10T07:02:17.960Z","etag":null,"topics":["e-sign","e-signature","javascript","react","styled-components"],"latest_commit_sha":null,"homepage":"https://www.useanvil.com/docs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anvilco.png","metadata":{"files":{"readme":"README.md","changelog":"changelog-template.hbs","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-09T23:37:24.000Z","updated_at":"2025-04-21T21:33:51.000Z","dependencies_parsed_at":"2024-06-19T17:10:26.281Z","dependency_job_id":"2cbc7950-418c-4972-aae3-938e266d1c6f","html_url":"https://github.com/anvilco/react-ui","commit_stats":{"total_commits":147,"total_committers":5,"mean_commits":29.4,"dds":0.3197278911564626,"last_synced_commit":"035bb8622a6b89fa10a23be3bc21b81fae1cfd7b"},"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvilco%2Freact-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvilco%2Freact-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvilco%2Freact-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvilco%2Freact-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anvilco","download_url":"https://codeload.github.com/anvilco/react-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254248133,"owners_count":22038971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e-sign","e-signature","javascript","react","styled-components"],"created_at":"2024-11-19T08:08:19.203Z","updated_at":"2025-05-14T23:31:09.952Z","avatar_url":"https://github.com/anvilco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Horizontal Lockupblack](https://user-images.githubusercontent.com/293079/169453889-ae211c6c-7634-4ccd-8ca9-8970c2621b6f.png#gh-light-mode-only)\n![Horizontal Lockup copywhite](https://user-images.githubusercontent.com/293079/169453892-895f637b-4633-4a14-b997-960c9e17579b.png#gh-dark-mode-only)\n\n# Anvil React UI Components\n\nThis 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.\n\nThe 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.\n\n* [AnvilEmbedFrame](#AnvilEmbedFrame) - an `iframe` component with a simple `onEvent` callback for embedding Etch e-sign, Workflows, or editors.\n* [AnvilSignatureModal](#AnvilSignatureModal) - a modal popup window component with lifecycle callbacks for embedding Anvil e-signatures.\n\nSee 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`.\n\n## What is Anvil?\n\n[Anvil](https://www.useanvil.com/developers) provides easy APIs for all things paperwork.\n\n1. [PDF filling API](https://www.useanvil.com/products/pdf-filling-api/) - fill out a PDF template with a web request and structured JSON data.\n2. [PDF generation API](https://www.useanvil.com/products/pdf-generation-api/) - send markdown or HTML and Anvil will render it to a PDF.\n3. [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.\n4. [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.\n\nLearn more on our [Anvil developer page](https://www.useanvil.com/developers).\n\n## AnvilEmbedFrame\n\nA very minimal component that allows you to embed Anvil into your app with an `iframe`. It will give you information via the `onEvent` callback.\n\n### Usage\n\nSee the [AnvilEmbedFrame README](./packages/anvil-embed-frame/README.md) for full details.\n\n```sh\nyarn add @anvilco/anvil-embed-frame\n```\n\n```sh\nnpm install @anvilco/anvil-embed-frame\n```\n\n```js\nimport AnvilEmbedFrame from '@anvilco/anvil-embed-frame'\n\n\u003cAnvilEmbedFrame\n  iframeURL={etchSignURL || workflowURL || editorURL}\n  onEvent={(event) =\u003e console.log('Event object:', event)}\n  className=\"anvil-embed-frame\"\n/\u003e\n```\n\n\n## AnvilSignatureModal\n\nA 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.\n\n![image](https://user-images.githubusercontent.com/26425671/101393509-0f604680-387c-11eb-8e09-b889b0c21c7f.png)\n\n### Usage\n\nSee the [AnvilSignatureModal README](./packages/react-signature-modal/README.md) for full details.\n\n```sh\nyarn add @anvilco/react-signature-modal\n```\n```sh\nnpm install @anvilco/react-signature-modal\n```\n\n```js\nimport AnvilSignatureModal from '@anvilco/react-signature-modal'\nimport '@anvilco/react-signature-modal/dist/styles.css'\n\n\u003cAnvilSignatureModal\n  signURL={signURL}\n  isOpen={isModalOpen}\n  onClose={() =\u003e setIsModalOpen(false)}\n  onLoad={() =\u003e setLoading(false)}\n  onEvent={(eventObject) =\u003e console.log(eventObject)}\n/\u003e\n```\n\n## Links 🔗\n\n* [@anvilco/anvil-embed-frame](https://www.npmjs.com/package/@anvilco/anvil-embed-frame)\n* [@anvilco/react-signature-modal](https://www.npmjs.com/package/@anvilco/react-signature-modal)\n* [Getting started with Anvil API](https://www.useanvil.com/docs/api/getting-started)\n* [Anvil e-signature API docs](https://www.useanvil.com/docs/api/e-signatures)\n\n\n## Notes\n\n* Please contact us at [support@useanvil.com](mailto:support@useanvil.com) to enable iframe embedding for editors.\n* React \u003e= v16.0 required.\n\n## Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n## Questions or Feedback\n\nPlease email us at [support@useanvil.com](mailto:support@useanvil.com).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanvilco%2Freact-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanvilco%2Freact-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanvilco%2Freact-ui/lists"}