{"id":13437638,"url":"https://github.com/kodyl/react-document-meta","last_synced_at":"2025-04-14T16:46:20.705Z","repository":{"id":31336328,"uuid":"34898969","full_name":"kodyl/react-document-meta","owner":"kodyl","description":"HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.","archived":false,"fork":false,"pushed_at":"2021-03-04T22:58:18.000Z","size":205,"stargazers_count":321,"open_issues_count":13,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-06T14:39:40.723Z","etag":null,"topics":[],"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/kodyl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-01T10:52:03.000Z","updated_at":"2025-01-03T10:51:43.000Z","dependencies_parsed_at":"2022-09-05T17:00:36.895Z","dependency_job_id":null,"html_url":"https://github.com/kodyl/react-document-meta","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodyl%2Freact-document-meta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodyl%2Freact-document-meta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodyl%2Freact-document-meta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodyl%2Freact-document-meta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kodyl","download_url":"https://codeload.github.com/kodyl/react-document-meta/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248918962,"owners_count":21183290,"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-07-31T03:00:58.925Z","updated_at":"2025-04-14T16:46:20.660Z","avatar_url":"https://github.com/kodyl.png","language":"JavaScript","readme":"React Document Meta [![Build Status](https://travis-ci.org/kodyl/react-document-meta.svg)](https://travis-ci.org/kodyl/react-document-meta) [![Coverage Status](https://coveralls.io/repos/github/kodyl/react-document-meta/badge.svg?branch=master)](https://coveralls.io/github/kodyl/react-document-meta?branch=master) [![npm version](https://badge.fury.io/js/react-document-meta.svg)](http://badge.fury.io/js/react-document-meta)\n===================\n\nHTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.\n\nBuilt with [React Side Effect](https://github.com/gaearon/react-side-effect)\n\n___________________\n\n\nInstallation\n-------------------\n```\nnpm install --save react-document-meta\n```\n\nNote: React Side Effect requires React 0.14+ - and so does React Document Meta.\n\n\nUsing with React v0.13\n-------------------\nDue to several deprecations and breaking changes to React, you'll have to use `react-document-meta@^1.0.0`.\n\n\nUpgrading from 0.1.x to 1.x\n-------------------\n\nAs React Side Effect has been upgraded there is a few breaking changes, which is found in the [changelog](CHANGELOG.md).\n\n\nFeatures\n-------------------\n- Supports extending and nesting on any number of levels\n- Ability to auto generate some meta tags for open graph, twitter, and more\n\nUsage\n-------------------\nSee `example` folder for a working sample.\n\n```javascript\nimport React from 'react';\nimport DocumentMeta from 'react-document-meta';\n\nclass Example extends React.Component {\n  render() {\n    const meta = {\n      title: 'Some Meta Title',\n      description: 'I am a description, and I can create multiple tags',\n      canonical: 'http://example.com/path/to/page',\n      meta: {\n        charset: 'utf-8',\n        name: {\n          keywords: 'react,meta,document,html,tags'\n        }\n      }\n    };\n\n    return (\n      \u003cDocumentMeta {...meta}\u003e\n        \u003ch1\u003eHello World!\u003c/h1\u003e\n      \u003c/DocumentMeta\u003e\n    );\n  }\n}\n\nReact.render(\u003cExample /\u003e, document.getElementById('root'));\n```\n\n### Nesting\nIn most real world use cases, you would like to set some defaults and modify, replace or add just some of the meta tags. `react-document-meta` always use the deepest data set, but you can add an `extend` attribute (`\u003cDocumentMeta {...metaData} extend /\u003e`), to instruct the component to merge with the meta data specified one level up. You can add the `extend` attribute to as many `DocumentMeta` components you would like, but the chain needs to be complete.\n\n### Automatic Meta Tags\n`react-document-meta` has the ability to generate meta tags based on the already provided meta data. Currently only open graph title, description and url is supported, which uses the data from `title`, `description` and `canonical`, and only in the case where the values has not been explicit set for `og:title`, `og:description` or `og:url` respectively.\n\n\nServer Usage\n-------------------\nWhen using `react-document-meta` in a project with server-side rendering, you would like to have the final meta data chunk available in your HTML output. You can achieve this by calling `DocumentMeta.rewind()`.\n\nInstead of getting a plain object, you can have the module return the meta as either React components or a HTML string. This is achieved by calling `DocumentMeta.renderAsReact()` or `DocumentMeta.renderAsHTML()`.\n\n```javascript\nimport React from 'react';\nimport DocumentMeta from 'react-document-meta';\n\nexport default handler = (...args) =\u003e {\n  ...\n  const app = React.renderToString(components);\n  const meta = DocumentMeta.renderAsHTML();\n  const markup = `\n    \u003chtml\u003e\n      \u003chead\u003e\n        ${meta}\n      \u003c/head\u003e\n      \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003e\n          ${app}\n        \u003c/div\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `\n  ...\n}\n```\n\n\nTODO:\n-------------------\n- [ ] Create full documentation\n- [ ] Improve flexibility for custom attributes\n","funding_links":[],"categories":["Uncategorized","UI Utilities","JavaScript","UI Utilites"],"sub_categories":["Uncategorized","Meta Tags"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodyl%2Freact-document-meta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkodyl%2Freact-document-meta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodyl%2Freact-document-meta/lists"}