https://github.com/talentlessguy/react-ogp
🌐 The ultimate React OpenGraph component
https://github.com/talentlessguy/react-ogp
opengraph opengraph-data react react- react-component react-component-library reactjs
Last synced: about 1 month ago
JSON representation
🌐 The ultimate React OpenGraph component
- Host: GitHub
- URL: https://github.com/talentlessguy/react-ogp
- Owner: talentlessguy
- License: mit
- Created: 2021-04-10T07:03:35.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-06T08:46:12.000Z (almost 4 years ago)
- Last Synced: 2025-04-15T01:09:02.855Z (about 1 month ago)
- Topics: opengraph, opengraph-data, react, react-, react-component, react-component-library, reactjs
- Language: TypeScript
- Homepage: https://npm.im/react-ogp
- Size: 33.2 KB
- Stars: 30
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-ogp
![Vulnerabilities][vulns-badge-url]
[![Version][v-badge-url]][npm-url]
![Last commit][last-commit-badge-url]
![Minified size][size-badge-url] [![Downloads][dl-badge-url]][npm-url]
The ultimate React OpenGraph component.
## Features
- Automatically sets `url` / `secure_url` for images and videos.
- TypeScript support
- Forcing to complete _all_ properties for an object not to forget to fill some fields
## Install
```sh
pnpm i react react-ogp
```
## Usage
### Next.js
```jsx
import React from 'react'
import { OGP } from 'react-ogp'
import Head from 'next/head'
export default function Index() {
return (
<>
>
)
}
```
### [React Helmet](https://github.com/nfl/react-helmet)
```jsx
import React from 'react'
import { OGP } from 'react-ogp'
import { Helmet as Head } from 'react-helmet'
export default function Index() {
return (
<>
>
)
}
```
[vulns-badge-url]: https://img.shields.io/snyk/vulnerabilities/npm/react-ogp.svg?style=flat-square
[v-badge-url]: https://img.shields.io/npm/v/react-ogp.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-ogp
[last-commit-badge-url]: https://img.shields.io/github/last-commit/talentlessguy/react-ogp.svg?style=flat-square
[size-badge-url]: https://img.shields.io/bundlephobia/min/react-ogp.svg?style=flat-square
[dl-badge-url]: https://img.shields.io/npm/dt/react-ogp?style=flat-square