{"id":16847607,"url":"https://github.com/fabiosantoscode/component-animatedpanel","last_synced_at":"2025-04-10T16:51:38.490Z","repository":{"id":146300379,"uuid":"43806475","full_name":"fabiosantoscode/component-animatedpanel","owner":"fabiosantoscode","description":"simple panel component that animates when scrolled in view","archived":false,"fork":false,"pushed_at":"2019-02-15T16:04:17.000Z","size":898,"stargazers_count":0,"open_issues_count":0,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T14:44:24.665Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fabiosantoscode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2015-10-07T09:33:18.000Z","updated_at":"2021-08-17T13:45:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"b7354c57-b909-4baf-9237-d0903f735eac","html_url":"https://github.com/fabiosantoscode/component-animatedpanel","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiosantoscode%2Fcomponent-animatedpanel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiosantoscode%2Fcomponent-animatedpanel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiosantoscode%2Fcomponent-animatedpanel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiosantoscode%2Fcomponent-animatedpanel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabiosantoscode","download_url":"https://codeload.github.com/fabiosantoscode/component-animatedpanel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248256028,"owners_count":21073444,"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":[],"created_at":"2024-10-13T13:08:30.505Z","updated_at":"2025-04-10T16:51:38.473Z","avatar_url":"https://github.com/fabiosantoscode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Adpanel\n\u003e An advert panel using GPT tags\n\n## Usage\n\n**This component expects an ES6 environment**, and so if you are using this in an app,\nyou should drop in a polyfill library - it has been tested with [babel-polyfill] but\n[core-js] or [es6-shim] may also work.\n\n[babel-polyfill]: https://babeljs.io/docs/usage/polyfill/\n[core-js]: https://www.npmjs.com/package/core-js\n[es6-shim]: https://www.npmjs.com/package/es6-shim\n\nThe default export is a React Component, so you can simply import the component and use\nit within some JSX, like so:\n\n```js\nimport Adpanel from '@economist/component-ad-panel';\n\nreturn \u003cAdpanel/\u003e;\n```\n\nFor more examples on usage, see [`src/example.es6`](./src/example.es6).\n\n## Props and defaults:\n\n * `adTag` (required string): The DFP tag this points to. Often in the format of a URL. example: `/5605/foo.bar/qux/x`.\n * `className` (string): Add this className to ad-panel__container.\n * ```\n  sizes={[\n      [ 60, 60 ],\n      [ 70, 70 ],\n      [ 300, 250 ],\n      [ 1024, 768 ]\n    ]}\n  ``` (array of pairs of advertisement width, height): what ad sizes can be loaded. Is used as the `size` argument to [googletag.defineSlot](https://developers.google.com/doubleclick-gpt/reference#googletag.defineSlot)\n * ```\n sizeMapping={[\n        [[980, 200], [[1024, 768]]],\n        [[0, 0], [[300, 250]]],\n      ]}\n      ``` (array of pairs of screen sizes [ width, height ] and advertisement sizes [ [width1, height1], [width2, height2], ... ] ): Each element in this array results in a call to [sizeMapping().addSize](https://developers.google.com/doubleclick-gpt/reference#googletag.SizeMappingBuilder_addSize)\n * `targeting` (array of pairs of key/value strings): Defines the ad targeting. Each element corresponds to a call to [setTargeting](https://developers.google.com/doubleclick-gpt/reference#googletag.PassbackSlot_setTargeting)\n * `reserveHeight` (number of px): Sets a min-height to the ad, so as to avoid content jumps when the ad eventually comes around.\n * `googletag` (instance of the googletag object): Mostly a testing hook, but can be passed to avoid loading the DFP tag again, if it was already loaded.\n\n## Relevant reading:\n\n * [The window.googletag API](https://developers.google.com/doubleclick-gpt/reference)\n * [understanding sizeMappings](https://support.google.com/dfp_premium/answer/3423562)\n\n\n## Deprecation notice\n\nThe `lazyload` prop has been removed as the feature was making this component unmaintainable and bug-prone. From now on you can use the excellent [react-lazy-load](https://github.com/loktar00/react-lazy-load/). Here's an example:\n\n```\n// Before:\n\u003cAdPanel lazyLoad {...otherProps} /\u003e\n\n// After:\n\u003cLazyLoad\u003e\n  \u003cAdPanel {...otherProps} /\u003e\n\u003c/LazyLoad\u003e\n```\n\nThe `animated` prop has also been removed, and its relevant CSS with it. This feature can also be implemented very easily using LazyLoad (and some classNames):\n\n```\n// Before:\n\u003cAdPanel animated {...otherProps} /\u003e\n\n// After:\nclass AnimatedAd extends React.Component {\n  render() {\n    const className = this.state \u0026\u0026 this.state.visible ?\n      'animated-ad-wrapper animated-ad-wrapper--visible' :\n      'animated-ad-wrapper';\n    return (\n      \u003cdiv className={className}\u003e\n        \u003cLazyLoad onContentVisible={() =\u003e { this.setState({ visible: true }) }}\u003e\n          \u003cAdPanel {...this.props} /\u003e\n        \u003c/LazyLoad\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\u003cAnimatedAd {...otherProps} /\u003e\n```\n\nBoth work exactly the same.\n\n## Install\n\n```bash\nnpm i -S @economist/component-ad-panel\n```\n\n## Run tests\n\n```bash\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabiosantoscode%2Fcomponent-animatedpanel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabiosantoscode%2Fcomponent-animatedpanel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabiosantoscode%2Fcomponent-animatedpanel/lists"}