{"id":22123505,"url":"https://github.com/proai/react-metadata","last_synced_at":"2025-03-24T07:29:31.725Z","repository":{"id":234674039,"uuid":"789349119","full_name":"ProAI/react-metadata","owner":"ProAI","description":"🏷️ Handle metadata with React","archived":false,"fork":false,"pushed_at":"2024-05-28T19:34:58.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T13:08:57.863Z","etag":null,"topics":["metadata","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ProAI.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":"2024-04-20T09:41:01.000Z","updated_at":"2024-05-28T19:34:36.000Z","dependencies_parsed_at":"2024-04-20T11:26:31.237Z","dependency_job_id":"11ec26c1-4a32-4e1c-9d93-70f57a32fb68","html_url":"https://github.com/ProAI/react-metadata","commit_stats":null,"previous_names":["proai/react-metadata"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Freact-metadata","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Freact-metadata/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Freact-metadata/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAI%2Freact-metadata/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProAI","download_url":"https://codeload.github.com/ProAI/react-metadata/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245227046,"owners_count":20580795,"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":["metadata","react"],"created_at":"2024-12-01T15:34:02.857Z","updated_at":"2025-03-24T07:29:31.701Z","avatar_url":"https://github.com/ProAI.png","language":"JavaScript","readme":"# 🏷️ React Metadata\n\nSimple lightweight metadata handler for React.\n\n## Problem\n\nOn the one hand handling metadata from scratch with React is hard. On the other hand existing solutions mostly provide a lot of configuration options, which makes it also hard to set it up.\n\n## Solution\n\n`react-metadata` aims to fill the gap between these two sides. It provides an easy way to define metadata. Once you update metadata, previous metadata will be deleted. Ideally you use `react-metadata` together with a router, so that you can set the metadata per route.\n\n## Installation\n\n```shell\nnpm install react-metadata\n# or\nyarn add react-metadata\n```\n\n## Usage\n\nCreate a meta client instance and use the meta provider in your app entry:\n\n```jsx\nimport React from 'react';\nimport { MetaClient, MetaProvider } from 'react-metadata';\n\nconst context = {\n  titleTemplate: 'Acme App',\n};\n\nconst metaClient = new MetaClient([{ title: 'Acme App' }], context);\n\nfunction App({ children }) {\n  return \u003cMetaProvider client={metaClient}\u003e{children}\u003c/MetaProvider\u003e;\n}\n```\n\nThe code above demonstrates that `MetaClient` accepts two parameters:\n\n| Parameter     | Description                                                                                                                                                                |\n| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `initialData` | The initial metadata, which is an array of meta descriptors. The meta descriptors are the same as the [Remix meta descriptors](https://remix.run/docs/en/main/route/meta). |\n| `context`     | This can be any value that you want to pass down to `useMeta`.                                                                                                             |\n\nAfterwards you can use the `useMeta` hook in your components to update. Again the `useMeta` hook accepts an array of [Remix like meta descriptors](https://remix.run/docs/en/main/route/meta). Once you call `useMeta`, the current meta will be deleted. The current meta is either the initial data (if you have not called `useMeta` yet) or the data of the last `useMeta` call.\n\n```jsx\nimport { useMeta } from 'react-metadata';\n\nfunction Dashboard() {\n  useMeta([{ title: 'Dashboard' }]);\n\n  ...\n}\n```\n\nAs described above you can also make use of the `context`. For that you need to pass a function to `useMeta` that returns the meta descriptors:\n\n```jsx\nimport { useMeta } from 'react-metadata';\n\nfunction Dashboard() {\n  useMeta(context =\u003e ([{ title: `Dashboard | ${context.titleTemplate}` }]));\n\n  ...\n}\n```\n\n### Full template\n\nFor convenience it might also make sense to create a full meta template. We can do that by defining the context as a function:\n\n```javascript\nconst context = (input) =\u003e {\n  const title = input.title ? `${input.title} | Acme App` : 'Acme App';\n  const description = input.description || 'The Acme app is a very useful app.';\n\n  return [\n    {\n      title,\n    },\n    {\n      name: 'description',\n      content: description,\n    },\n    {\n      property: 'og:title',\n      content: title,\n    },\n    {\n      property: 'og:description',\n      content: description,\n    },\n  ];\n};\n\n// Use raw template as initial data by defining the initial data as a function that gets the context.\nconst metaClient = new MetaClient((makeData) =\u003e makeMeta(), context);\n```\n\n```jsx\nimport { useMeta } from 'react-metadata';\n\nfunction Dashboard() {\n  useMeta(makeMeta =\u003e makeMeta({\n    title: 'Dashboard',\n    description: 'The Acme app dashboard is unbelievable.',\n  }));\n\n  ...\n}\n```\n\n### Server side rendering\n\nThis package also supports server side rendering. You can call `metaClient.getElements()` to get all meta tags as React elements. These elements should be inserted in the `\u003chead\u003e` tag of your initial html.\n\n## License\n\nThis package is released under the [MIT License](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproai%2Freact-metadata","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fproai%2Freact-metadata","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproai%2Freact-metadata/lists"}