{"_id":"@metomic/react","_rev":"41-7a22f8e772a601dbbeeb2304b64335ad","name":"@metomic/react","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@metomic/react","version":"0.1.2","keywords":["react","consent","cookie","metomic"],"license":"MIT","_id":"@metomic/react@0.1.2","maintainers":[{"name":"metomic-admin","email":"npm@metomic.io"}],"homepage":"https://github.com/metomic/react-metomic#readme","bugs":{"url":"https://github.com/metomic/react-metomic/issues"},"dist":{"shasum":"54d2c333c9b3db3401a16cb4c5d4c2eb2bc8f779","tarball":"https://registry.npmjs.org/@metomic/react/-/react-0.1.2.tgz","fileCount":5,"integrity":"sha512-CHRoI8c4N0zhw0Fj58G/1bTG392trLFgAL/Wx7VF+fArxefkxoxStB6h/vEh4cHyTdSArU7LV2K8I6N+TAfgVA==","signatures":[{"sig":"MEYCIQCJIz6kFCItk4pu3iURcN3YGo6WgIRruJ4FwGLNu+1QhwIhAO/pcr4ws1Lt21Rs+GbZpOCf2sTAasLd6jbFP8zIBcI/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesUkJCRA9TVsSAnZWagAAoK8QAJUeVY4UWh9l4hYt9Ylm\nc6m5M6HbKTmzwp9rIiT2XEHl20dTNOgnvHv5k9uMA1bj2fwYQ77xBiknudVJ\nK5djPmqUuRl6bwFYrt/xvlEEouTLPUS6tLjj59Omrwe9fjjP4L1hBL1oQMZ4\nLkrvBkBoXPEhL2q0NlFn30Ica2ByojIoLXwGSrQJzJ1eCmNHo0C+IJV7n0nl\nlkz2nFoaMamykNWX6uncCOdnzVHnuVf7bNU9huy/6CIbP8FqEAyIRLlRhSXi\ntfwQZsIx2gIqVl484WX0+YRKMLHhPnuYGZSeXDKSF5GB2lYSWLaIbVX0kEE1\n5jvsg/TCC/6t6yY3KxE7LM4GqA6IgWJs+H/8kYDSU1BclR8eblLe4ZjSgkjX\n+ESUyDgMGWQRBM/jc3zA0n6pTfBCDj+THesWbk6Tznhm4FMJp04bmBZAJEEW\na09c5dRI4vYKsOvYJhoP3YTYDM7UeJEjwgTLBLYbN5UhFNYFeFw/G2PdB+Ip\nBY9Vhp17brQNSUydMRE9zKAnLEEoKfHrUrEqw+C5jkHZub1/IYFaFHS3uFkw\nOg6TvdlQ+gIbQi7g0IKFCH8DO0493GE0DLOQHaonKKa0y8AI1/7g4dv9EqBk\nDY7AeDN0KGJBkDmtIosEfWVgTpNN+/NaVnAiqedPSxWxOBdQlkrugKLRgKYR\nwTqh\r\n=CctF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.cjs.js","husky":{"hooks":{"pre-push":"CI=true yarn test --passWithNoTests","pre-commit":"lint-staged"}},"style":"lib/default.css","module":"lib/index.esm.js","engines":{"node":">=10"},"gitHead":"eae454f64defb3e22ff5a57ac6566862416a9c54","private":false,"scripts":{"test":"react-scripts test --env=jest-environment-jsdom-sixteen","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","fix:js":"npx eslint --fix ./src/","lint:js":"npx eslint ./src/","build:lib":"env-cmd -f .env npx rollup -c","fix:style":"npx stylelint ./src/ --fix","lint:style":"npx stylelint ./src/"},"_npmUser":{"name":"metomic-admin","email":"npm@metomic.io"},"repository":{"url":"git+https://github.com/metomic/react-metomic.git","type":"git","directory":"/"},"_npmVersion":"6.14.4","description":"A react component to subscribe to user consent status via Metomic","directories":{},"_nodeVersion":"13.12.0","browserslist":{"production":["cover 95%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"react":"^16.13.1","react-dom":"^16.13.1","prop-types":"^15.7.2","react-intercom":"^1.0.15"},"eslintConfig":{"extends":"react-app"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^4.2.3","react":"^16.13.1","eslint":"^6.8.0","rimraf":"^3.0.2","rollup":"^2.3.2","env-cmd":"^10.1.0","prettier":"^2.0.2","react-dom":"^16.13.1","stylelint":"13.3.0","@babel/cli":"^7.8.4","prop-types":"^15.7.2","@babel/core":"^7.9.0","lint-staged":"^10.0.10","npm-run-all":"^4.1.5","autoprefixer":"^9.7.5","react-scripts":"3.4.1","recursive-copy":"^2.0.10","stylelint-order":"4.0.0","eslint-plugin-fp":"^2.3.0","@babel/preset-env":"^7.9.5","postcss-preset-env":"^6.7.0","@babel/preset-react":"^7.9.4","eslint-plugin-react":"^7.19.0","react-test-renderer":"^16.13.1","rollup-plugin-babel":"^4.4.0","eslint-config-airbnb":"^18.1.0","eslint-plugin-import":"^2.20.2","rollup-plugin-eslint":"^7.0.0","rollup-plugin-terser":"^5.3.0","rollup-plugin-postcss":"^2.5.0","@rollup/plugin-replace":"^2.3.2","@testing-library/react":"^10.0.1","eslint-config-prettier":"^6.10.1","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","rollup-plugin-filesize":"^7.0.0","@rollup/plugin-commonjs":"^11.0.2","rollup-plugin-stylelint":"^1.0.0","@testing-library/jest-dom":"^5.3.0","eslint-plugin-react-hooks":"^3.0.0","stylelint-config-standard":"20.0.0","rollup-plugin-includepaths":"^0.2.3","@rollup/plugin-node-resolve":"^7.1.1","@testing-library/user-event":"^10.0.0","@testing-library/react-hooks":"^3.2.1","jest-environment-jsdom-sixteen":"^1.0.3","rollup-plugin-peer-deps-external":"^2.2.2"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.2_1588676873175_0.30001283942747903","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-05-05T11:07:52.906Z","modified":"2026-07-01T10:37:03.636Z","0.1.2":"2020-05-05T11:07:53.310Z"},"bugs":{"url":"https://github.com/metomic/react-metomic/issues"},"license":"MIT","homepage":"https://github.com/metomic/react-metomic#readme","keywords":["react","consent","cookie","metomic"],"repository":{"url":"git+https://github.com/metomic/react-metomic.git","type":"git","directory":"/"},"description":"A react component to subscribe to user consent status via Metomic","maintainers":[{"email":"ausra@metomic.io","name":"ausra.fletcher"},{"email":"gabriel@metomic.io","name":"gabrieldavison"},{"email":"npm@metomic.io","name":"metomic-admin"},{"email":"morgandcollins96@gmail.com","name":"morganc96"},{"email":"npm@benvan.co.uk","name":"benvan"},{"email":"josh.hayes@metomic.io","name":"jhayes123"},{"email":"davidgebler@gmail.com","name":"dwgebler"},{"email":"duncan.abbott@gmail.com","name":"apeonfire"},{"email":"joe.white@metomic.io","name":"joewhite940"},{"email":"ben.osbourne@metomic.io","name":"ozzymetomic"},{"email":"aaron.chambers@metomic.io","name":"chambersaaron"},{"email":"go@getdane.co.uk","name":"gogetdane"}],"readme":"# React library for Metomic cookie widget\n\nReact wrapper around [Metomic](http://metomic.io/)'s cookie consent solution.\n\n## Install\n```\n# With npm\nnpm i @metomic/react\n\n# With Yarn\nyarn add @metomic/react\n```\n\n## Usage\n\nThis component implements the [Metomic SDK](https://metomic.io/reference#the-metomic-sdk) to make getting consent in your React app easy.\n\n### Quickstart\n\n```jsx\nimport { ConsentGate, MetomicProvider } from '@metomic/react'\n\nconst MyApp = () => (\n  <MetomicProvider projectId=\"my-project-id\">\n    <>\n      <ConsentGate micropolicy=\"my-policy\">\n        <MaybeBlockedComponent />\n      </ConsentGate>\n      <OtherComponent>\n    </>\n  </MetomicProvider>\n)\n```\n\n### `<MetomicProvider />`\nThe `<MetomicProvider>` is the easiest way of getting started.\nJust wrap your app with it pass in the `projectId` prop, and it'll inject the script tags for you in your document's head.\n\nOnce the scripts have loaded, `<MetomicProvider>` will inform any\n`<ConsentGate>`s in your code whether they should block or allow their `children`\nto render.\n\n**Props**\n| Prop         | Type    | Default    | Description                                                                                                                                                                                               |\n|--------------|---------|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| projectId    | string       | **(required)** | Your [Metomic project id](https://app.metomic.io/dashboard/developers)                                                                                                                                    |\n| children     | ReactElement | **(required)** | The rest of your app\n| autoblocking | boolean      | true           | Whether autoblocking is on. This is separate from the [setting in your dashboard](https://app.metomic.io/dashboard/autoblocking), and must be set to `true` if you wish to enable autoblocking, so that the autoblocking configuration is also downloaded. |\n| debug        | boolean      | false          | Set to `true` to get console logs for when blocking or unblocking happens.                                                                                                                                |\n\n\n### `<ConsentGate />`\nThe main component is the `<ConsentGate>`, which tells React whether to\nrender its `children` or not, based on whether the user has accepted the given\n`micropolicy`.\n\n```jsx\nimport {ConsentGate} from '@metomic/react'\n\nconst MyApp = () => (\n  <ConsentGate micropolicy=\"my-policy\">\n    <MaybeBlockedComponent />\n  </ConsentGate>\n)\n```\n\nIf you want to render a [Placeholder](https://metomic.io/docs/placeholders)\nin place of the blocked Component, simply add the `placeholder` prop. You\ncan also pass in any parameters you want by passing a an object into the `placeholderParams` prop.\n\n```jsx\nimport {ConsentGate} from '@metomic/react'\n\nconst MyApp = () => (\n  <ConsentGate\n    micropolicy=\"my-policy\"\n    placeholder=\"/my-placeholder.html\"\n    placeholderParams={{\n      color: 'blue',\n      position: 'left',\n    }}\n  >\n    <MaybeBlockedComponent />\n  </ConsentGate>\n)\n```\n\n| Prop              | Type         | Default     | Description                                                                                                                                     |\n|-------------------|--------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------|\n| micropolicy       | string       | **(required)**  | The micropolicy powering this `<ConsentGate/>`.                                                                                                 |\n| children          | ReactElement | **(required)** | The component that should be blocked or unblocked. Only one node is allowed, but you may wrap multiple children in a React Fragment if desired. |\n| placeholder       | string       | `undefined`    | The url pointing to your Placeholder. You may also use one of the [standard Metomic placeholders](https://metomic.io/docs/placeholder-library)  |\n| placeholderParams | object       | `undefined`    | Any arbitrary params you wish to pass to the Placeholder.                                                                                       |\n\n### Writing your own Placeholders\n\nSee the main documentation [here](https://metomic.io/docs/writing-your-own-placeholders).\n\nIf the `children` of a `<ConsentGate />` is a native DOM component (e.g. `<img>`\n`<picture>`, `<iframe>`, etc.), your placeholder will get the `text` property\nin its [`onReady()` payload](https://metomic.io/reference#onready).\n\nIf `children` is a custom React component that you write or import from a\nlibrary, the `text` property will simply be `undefined`. In most cases, you\nshould rely on the `placeholderParams` prop to customise your placeholder,\nrather than parsing the DOMString representing the rendered HTML.\n\n### Difference with HTML manual blocking\nBecause React isn't parsed the same way as regular HTML, we don't need a separate\nmechanisms for blocking [different kinds of HTML elements](https://metomic.io/docs/manual-blocking).\n\nThat is, instead of wondering if you should mutate the tag or wrap it, in React\nyou **always** wrap the component you want to block.\n\n```jsx\nimport {ConsentGate} from '@metomic/react'\n\nconst MyApp = () => (\n  <ConsentGate\n    micropolicy=\"my-policy\"\n    placeholder=\"/my-placeholder.html\"\n    placeholderParams={{\n      color: 'blue',\n      position: 'left',\n    }}\n  >\n    <script src=\"some-external-thing.js\" />\n  </ConsentGate>\n)\n```\n\n## Advanced Usage\n\nIf you want to control loading the Metomic snippet outside of your React app,\nyou can choose not to use the `<MetomicProvider>`. Since `<MetomicProvider>`\ninserts the Metomic scripts via a side effect, this might not be compatible\nwith your architecture.\n\nBecause `<MetomicProvider>` is simply syntactic sugar over the React Context\nthat `<ConsentGate>` uses, you may simply write your own Context Provider:\n\n```jsx\nimport {MetomicContext} from '@metomic/react'\nconst MyMetomicProvider = () => <MetomicContext.Provider\n  value={{\n    // Only set this to true if, by the time the Provider is rendered, you\n    // are sure that the `window.Metomic` object is initialised. If you\n    // have the snippet in your base HTML, this will be true.\n    isReady: true,\n    // Provide any function used for debugging.\n    // If you wish to silence debug statements, pass in a noop () => {}\n    debug: (...a) => console.log(`[metomic]`, ...a),\n    /* The set of rules powering autoblocking, keyed by micropolicy name:\n      {\n        micropolicy1: [rule1, rule2],\n        micropolicy2: [rule1, rule2]\n      }\n      This is only used for debugging purposes for now, but might be used\n      in future.\n    */\n    autoblockingRules: {},\n  }}>\n  {children}\n</MetomicContext.Provider>\n```","readmeFilename":"README.md"}