{"_id":"@codefund/react-api-hook","_rev":"2-d7f8fd9408c9efeb1f3b7a23a3e319e5","name":"@codefund/react-api-hook","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@codefund/react-api-hook","version":"0.0.1","description":"CodeFund.io API hook for React.js","author":{"name":"andrewmcodes"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/andrewmcodes/codefund-react-api-hook.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","private":false,"engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build","format":"prettier --write \"src/**/*\"","format:check":"prettier --check \"src/**/*\"","contributors:add":"all-contributors add","contributors:generate":"all-contributors generate"},"dependencies":{},"peerDependencies":{"react":"^16.9.0"},"devDependencies":{"@babel/core":"^7.2.2","@babel/runtime":"^7.3.1","@testing-library/react-hooks":"^3.2.1","@types/jest":"^23.3.13","@types/react":"^16.7.22","all-contributors-cli":"^6.12.0","cross-env":"^5.2.0","gh-pages":"^2.0.1","prettier":"^1.19.1","react":"^16.9.0","react-scripts":"^3.0.1","react-test-renderer":"^16.9.0","rollup":"^1.1.2","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.19.2","rollup-plugin-url":"^2.1.0","typescript":"^3.2.4"},"gitHead":"9850b835d547290d9bb292f4b78ec2d80e88b6d6","bugs":{"url":"https://github.com/andrewmcodes/codefund-react-api-hook/issues"},"homepage":"https://github.com/andrewmcodes/codefund-react-api-hook#readme","_id":"@codefund/react-api-hook@0.0.1","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-pYqp0VvSib7tsg5eK9bKIAuBvd0Bq/kLqM+2/hEzVSbdpKZlO+Kf043iq1se7BKWIE37p0M/q0f2XT2OOKRXLg==","shasum":"5beec053a56ee4508588f69de901a6c99db8792d","tarball":"https://registry.npmjs.org/@codefund/react-api-hook/-/react-api-hook-0.0.1.tgz","fileCount":41,"unpackedSize":585287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFC9ZCRA9TVsSAnZWagAATEEP/jfhrlR3TrpGNSdkYVrn\nlEz2HQpFs9gblvtFBVlWwqhao5Na88T0FWg8fNFuvvWTLMWBIrRcUif/mkiI\nfQtGWdVYtcOA56TeM4efkI3r2O33qG9QD7s7tGYTvB+Rk4VtYgDgzd3OX8f2\njp4ROA5r/AuNY+tY7ctQwNfnT9K3WOlkYkS0wpnCYfI533XOTRr7lgcYUG5i\nlg6sY7h9k8zqkDM4UxZfYtXNRAizQfO73AgiO/khdnjBPeZkN/xcXJoiodHU\nKH8/fyMTG5BhT21tDnURazxwYtF1YnUsySjh/SUa3vto6tpFcWZlTG/Sb1Y5\nAcKVmKVBHNurcPBb6U3N1whD1+nQARzTe3j6yYtsK3vF7YggQFWreIbkS1PK\nf+6cA525fcqQvQQwfxqLnOGJ55z+wizQkMjl9bnSLTaootZjzcztH505EVfN\ni6Ugnf+H+cpnajLa5+sRLweUQoDJXDABSONKxa/g0C6zGOUltmdHgOFI+ClD\n2qE31lZyUG8nl8SHexr6Gt+IY3+qUnQzAbjpu0lEuNnxi0sZmziRvZjm9yLT\npjt8WqfGn2nhjjEFX2Z0a6B6QiVJepousBtCV0t8MfyO2a+7uficLkLFbPrh\nbTBaP5VixRqwobBa/BVhuhsHR5hyF5FwwLviFTlM5003TiRGD0XnlvDaTpxZ\nq7Qa\r\n=mKPv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD10YMLlIZos3AuEYnfQVdONyXDAq1bbe06NrijjZ2wKwIgQVVPdkPJ43zc0ieF+BI8eJmsmYlfGMEq6cnmT/40B3o="}]},"maintainers":[{"name":"andrewmcodes","email":"andrewmcodes@protonmail.com"}],"_npmUser":{"name":"andrewmcodes","email":"andrewmcodes@protonmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-api-hook_0.0.1_1578381144602_0.36912738834282566"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2020-01-07T07:12:24.368Z","0.0.1":"2020-01-07T07:12:24.772Z","modified":"2023-05-25T07:26:13.884Z"},"maintainers":[{"name":"andrewmcodes","email":"andrewmcodes@protonmail.com"}],"description":"CodeFund.io API hook for React.js","homepage":"https://github.com/andrewmcodes/codefund-react-api-hook#readme","repository":{"type":"git","url":"git+https://github.com/andrewmcodes/codefund-react-api-hook.git"},"author":{"name":"andrewmcodes"},"bugs":{"url":"https://github.com/andrewmcodes/codefund-react-api-hook/issues"},"license":"MIT","readme":"[CoC]: /CODE_OF_CONDUCT.md\n[contributing]: /CONTRIBUTING.md\n[license]: /LICENSE\n\n# @codefund/react-api-hook\n<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n<!-- ALL-CONTRIBUTORS-BADGE:END -->\n\n[![NPM](https://img.shields.io/npm/v/@codefund/react-api-hook.svg)](https://www.npmjs.com/package/@codefund/react-api-hook)\n\n> CodeFund.io API hook for React.js\n\n## Install\n\n```bash\n# NPM\nnpm install --save @codefund/react-api-hook\n\n# Yarn\nyarn add @codefund/react-api-hook\n```\n\n## Usage\n\nAll you need to do is pass your CodeFund Property ID to the hook and save the ad markup to a variable:\n\n```js\nconst { ad } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)\n```\n\nThe hook will return three values if you'd like to use them, but `ad` is the only necessary value.\n\nNote that we only return an ad when your `NODE_ENV` is production.\n\n### `ad: string`\n\nThe markup for the ad that you can then render on a page.\n\n<details>\n  <summary>Example Return Value</summary>\n\n  ```html\n  <link href=\"https://app.codefund.io/packs/css/code_fund_ad-a247634a.css\" rel=\"stylesheet\" media=\"all\"><div id=\"cf\" data-template=\"default\" data-theme=\"light\"> <span> <span class=\"cf-wrapper\"> <a href=\"https://app.codefund.io/impressions/654962e7-a2b0-40a5-9419-96d372c879cc/click?campaign_id=635&amp;creative_id=580&amp;property_id=669&amp;template=default&amp;theme=light\" class=\"cf-sponsored-by\" target=\"_blank\" rel=\"sponsored noopener\"> <span class=\"cf-img-wrapper\"> <img src=\"https://cdn2.codefund.app/1dipzax8qeezdz49lasl7abpbkao\" alt=\"Sell Out Ethically\" border=\"0\" height=\"100\" width=\"130\" class=\"cf-img\"> </span> <span class=\"cf-text\"> <strong>Earn money without selling out.</strong> <span>Consider placing ethical ads on your site.</span> </span> </a> <a href=\"https://app.codefund.io/invite/4nr1oPkB4W8\" class=\"cf-powered-by\" target=\"_blank\" rel=\"sponsored noopener\"> <em>ethical</em> ad by CodeFund <img src=\"https://app.codefund.io/display/654962e7-a2b0-40a5-9419-96d372c879cc.gif\" data-src=\"https://app.codefund.io/display/654962e7-a2b0-40a5-9419-96d372c879cc.gif\" data-behavior=\"trackImpression\" class=\"cf-impression\" alt=\"\"> </a> </span> </span> </div>\n  ```\n\n</details>\n\n### `loading: boolean`\n\nA boolean value indicating whether the ad is in a loading state or not. You can use this to create a nice loading or skeleton effect, which you can see in the example app.\n\n### `error: string`\n\nA string value that holds the response message from the fetch request in the event the request returns a non-200 response code.\n\n## Basic Example\n\n```js\nimport React from \"react\"\nimport { useCodeFundAd } from \"@codefund/react-api-hook\"\n\nconst App = () => {\n  const { ad } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)\n  return <Ad ad={ad} />\n}\n\nconst Ad = ({ ad }) => (\n  <div dangerouslySetInnerHTML={{ __html: ad }} />\n)\n\nexport default App\n```\n\n## Advanced Example\n\n```js\nimport React from \"react\"\nimport Skeleton from \"react-skeleton-loader\"\nimport { useCodeFundAd } from \"@codefund/react-api-hook\"\n\nclass App extends React.Component {\n  render () {\n    return <CodeFund />\n  }\n}\n\nfunction CodeFund () {\n  const { ad, loading, error } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)\n  if (loading) {\n    return <AdLoading />\n  }\n\n  if (!error) {\n    return <AdMarkup ad={ad} />\n  }\n}\n\nfunction AdMarkup (props) {\n  return <div dangerouslySetInnerHTML={{ __html: props.ad }} />\n}\n\nfunction AdLoading () {\n  return <Skeleton count={5} width={\"330px\"} borderRadius={\"0px\"} />\n}\n\nexport default App\n```\n\n## Contributing\n\nWe encourage you to contribute! Please check out the [Contributing Guide][contributing] for guidelines about how to proceed.\n\n### Code of Conduct\n\nEveryone interacting with the project’s codebase and issue tracker are expected to follow the [Code of Conduct][CoC].\n\n### Coding Standards\n\nThis project uses Prettier for JavaScript code to minimize bike shedding related to source formatting.\n\nPlease run `yarn format` prior to submitting pull requests.\n\n## License\n\nReleased under the [MIT License][license].\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://www.andrewmason.me/\"><img src=\"https://avatars1.githubusercontent.com/u/18423853?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Mason</b></sub></a><br /><a href=\"https://github.com/andrewmcodes/codefund-react-api-hook/commits?author=andrewmcodes\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.julianrubisch.at\"><img src=\"https://avatars0.githubusercontent.com/u/4352208?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Julian Rubisch</b></sub></a><br /><a href=\"https://github.com/andrewmcodes/codefund-react-api-hook/commits?author=julianrubisch\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md"}