Rich text and sharing components

If you want Next.js App Router to handle fetching and rendering, use List and View. This page explains RichText which displays the retrieved HTML and ShareButtons which shares the public URL. These components do not fetch content. These examples use @genko-me/[email protected].

npm install @genko-me/react

To record and display views, use PageView and ViewCount; see Page views.

Render body HTML with RichText

Pass the HTML string of the rich text field to RichText. It can also be used from Next.js' server components.

import { notFound } from "next/navigation";import { RichText } from "@genko-me/react";import { genko } from "@/lib/client";
export default async function BlogPostPage({  params,}: {  params: Promise<{ id: string }>;}) {  const { id } = await params;  const post = await genko.apis.blog.getOrNull(id);  if (!post) notFound();
  return (    <main>      <h1>{post.title}</h1>      <RichText html={post.body} as="article" className="article-body" />    </main>  );}

The decoration of the text is provided by CSS on the site side. Just adding the class prose does not automatically add typography CSS.

.article-body { line-height: 1.9; }.article-body h2 { margin-block: 2em 0.75em; font-size: 1.5em; }.article-body p { margin-block: 1em; }.article-body img { max-width: 100%; height: auto; }.article-body pre { overflow-x: auto; }

RichText itself does not sanitize HTML. Please use it to display rich text that has passed genko.me's saving process, and do not pass other external input as is.

Show share buttons with ShareButtons

Share buttons with click actions are imported from another subpath @genko-me/react/share-buttons.

import { ShareButtons } from "@genko-me/react/share-buttons";
export function ArticleShare() {  return <ShareButtons url="https://your-site.example.com/blog/abcDEF123456" title="My first post" />;}

Pass the published post URL on your site to url. It is not a delivery API URL or a preview URL that includes draftKey.

Use the browser's Clipboard API for copying. You cannot copy it in an environment where it is not available, so please check the operation in a public environment as well.

share (@genko-me/[email protected] and later) opens the OS share sheet (navigator.share). It appears after being displayed on the screen only in compatible environments such as smartphones (it is not included in the server-side output and does not appear in non-compatible environments). If services is omitted, it will be listed at the end, and if it is specified, it will appear at the written position. Closing the share sheet does nothing. If it cannot open, the button copies the link. In the iPhone X app, the X share screen (x) sometimes gets stuck at the login screen, so share is an alternative.

Adjust appearance

These are the main CSS variables of standard style in 0.5.4. Specify them on the elements surrounding the component.

The default value can also be obtained from GENKO_DESIGN_TOKENS in @genko-me/react. The icon color for each brand is fixed. The display when focused can be adjusted with --genko-focus-ring.

If you want to use your own style, enable unstyled. Please also provide a focus display when operating the keyboard.

<ShareButtons  url="https://your-site.example.com/blog/abcDEF123456"  unstyled  className="share-row"  buttonClassName="share-button"/>

.share-row { display: flex; gap: 12px; }.share-button { padding: 10px; border: 1px solid currentColor; }.share-button[data-focus-visible] { outline: 2px solid blue; outline-offset: 3px; }

If you want to create your own UI, you can only assemble the share URL using the SDK's buildShareUrl(service, { url, title }). copy and share are not operations that open a URL, so they are not covered by this function (nor are they included in the type).