GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → talentlessguy → react-ogp

talentlessguy / react-ogp

Licence: MIT license
🌐 The ultimate React OpenGraph component

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Labels

reactreactjsreact-componentopengraphreact-opengraph-datareact-component-library

Projects that are alternatives of or similar to react-ogp

react-circle-flags
🚀 A React component with a collection of 300+ minimal circular SVG country flags. Wrapper of HatScripts/circle-flags
Stars: ✭ 29 (+7.41%)
Mutual labels:  react-component, react-component-library
rn-markdown
basic markdown renderer for react-native using the great https://github.com/chjj/marked parser
Stars: ✭ 21 (-22.22%)
Mutual labels:  react-component
React Kawaii
Cute SVG React Components
Stars: ✭ 2,709 (+9933.33%)
Mutual labels:  react-component
React Email Editor
Drag-n-Drop Email Editor Component for React.js
Stars: ✭ 3,131 (+11496.3%)
Mutual labels:  react-component
React Sight
Visualization tool for React, with support for Fiber, Router (v4), and Redux
Stars: ✭ 2,716 (+9959.26%)
Mutual labels:  react-component
React Emoji Render
Normalize and render emoji's the way your users expect.
Stars: ✭ 250 (+825.93%)
Mutual labels:  react-component
React Photo View
一款精致的 React 图片预览组件
Stars: ✭ 218 (+707.41%)
Mutual labels:  react-component
react-bolivianite-grid
React grid component for virtualized rendering large tabular data.
Stars: ✭ 95 (+251.85%)
Mutual labels:  react-component
go-opengraph
Golang package for parsing OpenGraph data from HTML into regular structures
Stars: ✭ 66 (+144.44%)
Mutual labels:  opengraph
Sweetalert React
Declarative SweetAlert in React
Stars: ✭ 244 (+803.7%)
Mutual labels:  react-component
Boundless
✨ accessible, battle-tested React components with infinite composability
Stars: ✭ 242 (+796.3%)
Mutual labels:  react-component
React Native demo
react-native实现网易新闻和美团，实现大部分页面。使用最新的react-navigation等组件，同时支持安卓和iOS设备。
Stars: ✭ 237 (+777.78%)
Mutual labels:  react-component
SeoTags
SeoTags create all SEO tags you need such as meta, link, twitter card (twitter:), open graph (og:), and JSON-LD schema (structred data).
Stars: ✭ 113 (+318.52%)
Mutual labels:  opengraph
Virtual List
🧾 React Virtual List Component which worked with animation
Stars: ✭ 232 (+759.26%)
Mutual labels:  react-component
react-input-trigger
React component for handling character triggers inside textareas and input fields. 🐼
Stars: ✭ 88 (+225.93%)
Mutual labels:  react-component
React Native Htmlview
A React Native component which renders HTML content as native views
Stars: ✭ 2,546 (+9329.63%)
Mutual labels:  react-component
React Css Grid
React layout component based on CSS Grid Layout and built with styled-components
Stars: ✭ 239 (+785.19%)
Mutual labels:  react-component
React Powerplug
🔌 Renderless Containers
Stars: ✭ 2,704 (+9914.81%)
Mutual labels:  react-component
react-win32dialog
💠 Modeless, resizeable and moveable dialog boxes with a classic Windows look-and-feel. Comes with a lightweight window manager that supports window stacking.
Stars: ✭ 30 (+11.11%)
Mutual labels:  react-component
react-power-select
A highly composable & reusable select/autocomplete components
Stars: ✭ 63 (+133.33%)
Mutual labels:  react-component
View All Similar Projects ➔

react-ogp

Vulnerabilities Version Last commit Minified size Downloads

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

pnpm i react react-ogp

Usage

Next.js

import React from 'react'
import { OGP } from 'react-ogp'
import Head from 'next/head'

export default function Index() {
  return (
    <>
      <Head>
        <OGP
          url="https://example.com"
          title="My website"
          description="This is my website"
          siteName="example.com"
          image="http://example.com/cover.jpg"
        />
      </Head>
    </>
  )
}

React Helmet

import React from 'react'
import { OGP } from 'react-ogp'
import { Helmet as Head } from 'react-helmet'

export default function Index() {
  return (
    <>
      <Head>
        <OGP
          url="https://example.com"
          title="My website"
          description="This is my website"
          siteName="example.com"
          image="http://example.com/cover.jpg"
        />
      </Head>
    </>
  )
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].