{"id":20846317,"url":"https://github.com/totalityworks/wpgravitybundle","last_synced_at":"2025-05-09T02:59:59.120Z","repository":{"id":41193024,"uuid":"414397112","full_name":"TotalityWorks/wpgravitybundle","owner":"TotalityWorks","description":"NO LONGER MAINTAINED: A component library to simplify your headless WordPress React application using Gravity Forms.","archived":false,"fork":false,"pushed_at":"2025-02-05T17:45:45.000Z","size":1917,"stargazers_count":3,"open_issues_count":11,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-09T02:59:52.652Z","etag":null,"topics":["gravityforms","reactjs","wordpress","wpgraphql"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/TotalityWorks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-10-06T23:02:47.000Z","updated_at":"2025-02-05T17:49:26.000Z","dependencies_parsed_at":"2024-11-18T02:15:47.049Z","dependency_job_id":"b440b9d2-5ead-4c5d-844b-ee32b0ce87f6","html_url":"https://github.com/TotalityWorks/wpgravitybundle","commit_stats":{"total_commits":96,"total_committers":2,"mean_commits":48.0,"dds":0.02083333333333337,"last_synced_commit":"36fd8e676b8c54d89e3b13ad5d6f7127b861e3c6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotalityWorks%2Fwpgravitybundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotalityWorks%2Fwpgravitybundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotalityWorks%2Fwpgravitybundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotalityWorks%2Fwpgravitybundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TotalityWorks","download_url":"https://codeload.github.com/TotalityWorks/wpgravitybundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253181418,"owners_count":21866991,"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":["gravityforms","reactjs","wordpress","wpgraphql"],"created_at":"2024-11-18T02:15:44.371Z","updated_at":"2025-05-09T02:59:59.115Z","avatar_url":"https://github.com/TotalityWorks.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/mosesintech"],"categories":[],"sub_categories":[],"readme":"# WPGravityBundle (No Longer Maintained)\n\nHeadless WordPress is the future of WordPress, and WPGraphQL is at it's helm. With `WPGraphQL for Gravity Forms`, you can harness the power of Gravity Forms for your headless website. This package is built to complement the work done by AxePress Development by giving you a React Component and a hook that will handle your form data and assemble your submission mutation for you.\n\n## Installation\n\nTo install this package simply run\n\n`npm install wpgravitybundle`\n\nThe following system is recommended:\n- PHP 7.4-8.1+\n- WordPress 5.4.1+\n- WPGraphQL 1.9.0+\n- Gravity Forms 2.5+ (Recommend: v2.6+)\n- WPGraphQL for Gravity Forms 0.12.3\n- WPGraphQL Upload - used for File Upload\n\nTechnically, this package simply needs data in JSON format so the above is not necessary. However, the shape of this data is dependant upon the shape that `WPGraphQL for Gravity Forms` gives you for your data and expects upon form submission.\n\n## Use\n\nTo use this package, import the form component and the hook.\nThe GravityForm component needs two props: form and onSubmit.\nSince this package is built to use with `WPGraphQL for Gravity Forms` WordPress plugin by AxePress Development, it expects a specific json object for each field.\n`form` should be the data.wpGfForm object you receive from your query.\nThe `onSubmit` prop is expecting a function.\n\nInternally, the package will map through your fields, display them, and handle state and validation.\nThe form values are passed into your onSubmit function when the form is submitted.\nThey are already preformatted so that all you need to do is pass the values into your mutation as an variable.\n\nThe `useGravityFormMutation` hook needs your form data as well. It will use the form data to create the necessary GraphQL Mutation to submit the user's input. Just assign it a name and plug it into your preferred GraphQL client.\n\nExample Use:\n\n``` ts\nimport React from 'react'\nimport { graphql } from 'gatsby'\nimport { useMutation } from \"urql\"\nimport Parser from 'html-react-parser'\nimport GravityForm, { useGravityFormMutation } from \"wpgravitybundle\"\n\nexport default function Example({ data }) {\n  const form = data.wpGfForm\n  const buttonClass = \"btn-primary\"\n  const captchaSiteKey = process.env.GOOGLE_INVISIBLE_CAPTCHA_SITE_KEY\n  const captchaSecretKey = process.env.GOODLE_INVISIBLE_CAPTCHA_SECRET_KEY\n\n  const validation = [\n    {\n      id: 5, // id of the form field.\n      regex: /[0-9]+/g, // regex you would like to validate the field with.\n      message: \"I don't like letters! Only numbers.\" // error message displayed if validation fails.\n    }\n  ]\n  const captcha = { \n    captchaSiteKey, \n    captchaSecretKey,\n    type: \"Invisible\" // options are \"Invisible\" and \"Checkbox\".\n  }\n\n  const gravityFormMutation = useGravityFormMutation(form)\n  const SubmitForm = `${gravityFormMutation}`\n\n  const [{ data, fetching, error }, submitForm] = useMutation(SubmitForm)\n\n  const handleSubmit = (values: any) =\u003e {\n    return submitForm(values)\n  }\n\n  if (fetching) {\n    return \u003cp\u003eLoading... \u003c/p\u003e\n  }\n\n  if (error) {\n    return \u003cp\u003eThere was an error submitting the form: {error.message}\u003c/p\u003e\n  }\n\n  if (data) {\n    return \u003cp\u003eConfirmation message here!\u003c/p\u003e\n  }\n\n  return (\n    \u003c\u003e\n      {form \u0026\u0026 (\n        \u003c\u003e\n          \u003cGravityForm\n            form={form} // necessary\n            onSubmit={handleSubmit} // necessary\n            buttonClass={buttonClass} // optional\n            validation={validation} // optional. For custom field value validation.\n            captcha={captcha} // necessary if you are using a Captcha field.\n            parser={Parser} // necessary if you are using an HTML field.\n            debug={true} // will console.log form state to help you debug issues.\n          /\u003e\n        \u003c/\u003e\n      )}\n    \u003c/\u003e\n  )\n}\n\nexport const query = graphql`\n  query {\n      wpGfForm(databaseId: {eq: 1}) {\n        id\n        databaseId\n        cssClass\n        formFields {\n          nodes {\n            ... on WpTextField {\n              id\n              type\n              cssClass\n              isRequired\n              label\n              pageNumber\n              placeholder\n              size\n            }\n          }\n        }\n        submitButton {\n          text\n          type\n        }\n      }\n    }\n  `\n```\n\n## Styling\n\nAdmittedly, more work could be done to make styling easier and this is something we want to do for future releases.\nFor now, the easiest way is to take advantage of `cssClass`. You can query for `cssClass` on the form and for every form field.\nEach form field is wrapped in a `\u003cdiv className={`${cssClass}`}\u003e`. Certain fields have the cssClass set on the fieldset element instead.\n\n## Demos\n\nCheck out https://WPGravityBundle.com to see it in action.\n![Example Form](./imgs/example.png)\n\n\n## Inspiration\n\nThis package was inspired by the work of Kellen Mace (https://twitter.com/kellenmace) of WP Engine and his public Github repository: https://github.com/kellenmace/gravity-forms-in-headless-wordpress-gatsby.\n\n## Say Thank You\n\nIf you enjoy using WPGravityBundle and want to say thank you, you can buy me a coffee:\n\n\u003ca href=\"https://www.buymeacoffee.com/mosesintech\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\"\u003e\u003c/a\u003e\n\n## About the Author.\n\nI love WordPress and React.\nI have been working with WordPress for 15 years, and React/Node for 4.\nHeadless WordPress is definitely a passion of mine, and I love looking for opportunities to contribute whenever I can.\nIf you have a WordPress/React project you'd like a hand with, please reach out to me at moses@totalityworks.com!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotalityworks%2Fwpgravitybundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftotalityworks%2Fwpgravitybundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotalityworks%2Fwpgravitybundle/lists"}