{"id":17025857,"url":"https://github.com/shettypuneeth/react-codepen-embed","last_synced_at":"2026-04-11T22:30:17.238Z","repository":{"id":26303665,"uuid":"107886305","full_name":"shettypuneeth/react-codepen-embed","owner":"shettypuneeth","description":"React component to embed pens from Codepen","archived":false,"fork":false,"pushed_at":"2023-06-29T19:23:23.000Z","size":409,"stargazers_count":30,"open_issues_count":9,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-19T12:07:49.042Z","etag":null,"topics":["codepen","embedded","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shettypuneeth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-10-22T17:14:56.000Z","updated_at":"2023-11-16T23:45:16.000Z","dependencies_parsed_at":"2024-06-18T21:26:10.899Z","dependency_job_id":"4223fd26-930c-432d-a518-551e654c413c","html_url":"https://github.com/shettypuneeth/react-codepen-embed","commit_stats":{"total_commits":22,"total_committers":5,"mean_commits":4.4,"dds":0.2272727272727273,"last_synced_commit":"f472f580b3d2751eb5f3c695591527138fcb82e8"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shettypuneeth%2Freact-codepen-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shettypuneeth%2Freact-codepen-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shettypuneeth%2Freact-codepen-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shettypuneeth%2Freact-codepen-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shettypuneeth","download_url":"https://codeload.github.com/shettypuneeth/react-codepen-embed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219847884,"owners_count":16556343,"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":["codepen","embedded","reactjs"],"created_at":"2024-10-14T07:30:05.407Z","updated_at":"2026-04-11T22:30:17.181Z","avatar_url":"https://github.com/shettypuneeth.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-codepen-embed\n\nReact component for embedding pens from [`Codepen.io`](https://codepen.io)\n\n## Installation\n\n```bash\n#using npm cli\nnpm install --save react-codepen-embed\n\n#using yarn\nyarn add react-codepen-embed\n```\n\n## Usage\n\n```javascript\nimport React from \"react\";\nimport Codepen from \"react-codepen-embed\";\n\nconst CodepenEmbedded = () =\u003e {\n  return \u003cCodepen hash=\"JyxeVP\" user=\"shettypuneeth\" /\u003e;\n};\n```\n\n## Component Props\n\n| Property   | Type      | Required | Default      | Description                                                    |\n| ---------- | --------- | -------- | ------------ | -------------------------------------------------------------- |\n| hash       | `string`  | `true`   |              | Id of the pen to embed                                         |\n| user       | `string`  | `true`   |              | Codepen username                                               |\n| height     | `number`  | `false`  | `300`        | Height of the pen                                              |\n| loader     | `element` | `false`  |              | Loader to render while the pen is being embedded or errors out |\n| defaultTab | `string`  | `false`  | `css,result` | Default tab to display                                         |\n| themeId    | `string`  | `false`  | `dark`       | Theme for the pen                                              |\n| preview    | `boolean` | `false`  | `true`       | Make the preview \"Click-to-Load\"                               |\n| editable   | `boolean` | `false`  | `false`       | Can edit code                                                  |\n| title      | `string`  | `false`  |              | Title of the pen                                               |\n\n## API\n\n#### `Props.loader`\n\nCompenent to render when the pen is being embedded or when it errors.\n\n```js\n\u003cCodepen\n  hash=\"JyxeVP\"\n  user=\"shettypuneeth\"\n  loader={() =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e}\n/\u003e\n```\n\nIf the embed fails then the loader component will receive an error prop\n\n```js\nconst Loading = props =\u003e {\n  if (props.error) {\n    return \u003cdiv\u003eError\u003c/div\u003e;\n  }\n  return \u003cdiv\u003eLoading...\u003c/div\u003e;\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshettypuneeth%2Freact-codepen-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshettypuneeth%2Freact-codepen-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshettypuneeth%2Freact-codepen-embed/lists"}