react-datocms - npm Package Compare versions

Comparing version 1.6.3 to 1.6.4

package.json

 {
   "name": "react-datocms",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "types": "dist/types/index.d.ts",
@@ -77,3 +77,3 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "datocms-listen": "^0.1.3",
+    "datocms-listen": "^0.1.4",
     "datocms-structured-text-generic-html-renderer": "^1.1.0",
@@ -80,0 +80,0 @@ "datocms-structured-text-utils": "^1.1.0",

README.md

@@ -7,2 +7,8 @@ # react-datocms
 
+<br /><br />
+<a href="https://www.datocms.com/">
+  <img src="https://www.datocms.com/images/full_logo.svg" height="60">
+</a>
+<br /><br />
+
 ## Table of Contents
@@ -13,4 +19,4 @@
 
-  - [Demos](#demos)
-  - [Installation](#installation)
+- [Demos](#demos)
+- [Installation](#installation)
 - [Live real-time updates](#live-real-time-updates)
@@ -33,3 +39,4 @@ - [Reference](#reference)
   - [Basic usage](#basic-usage)
-  - [Custom renderers](#custom-renderers)
+  - [Custom renderers for inline records, blocks, and links](#custom-renderers-for-inline-records-blocks-and-links)
+  - [Override default text rendering](#override-default-rendering-of-nodes)
   - [Props](#props-1)
@@ -107,4 +114,4 @@
 ```js
-import React from "react";
-import { useQuerySubscription } from "react-datocms";
+import React from 'react';
+import { useQuerySubscription } from 'react-datocms';
 
@@ -122,9 +129,9 @@ const App: React.FC = () => {
     variables: { first: 10 },
-    token: "YOUR_API_TOKEN",
+    token: 'YOUR_API_TOKEN',
   });
 
   const statusMessage = {
-    connecting: "Connecting to DatoCMS...",
-    connected: "Connected to DatoCMS, receiving live updates!",
-    closed: "Connection closed",
+    connecting: 'Connecting to DatoCMS...',
+    connected: 'Connected to DatoCMS, receiving live updates!',
+    closed: 'Connection closed',
   };
@@ -189,4 +196,4 @@
 ```js
-import React from "react";
-import { Image } from "react-datocms";
+import React from 'react';
+import { Image } from 'react-datocms';
 
@@ -300,4 +307,4 @@ const Page = ({ data }) => (
 ```js
-import React from "react";
-import { renderMetaTags } from "react-datocms";
+import React from 'react';
+import { renderMetaTags } from 'react-datocms';
 
@@ -342,4 +349,4 @@ const Page = ({ data }) => (
 ```js
-import React from "react";
-import { StructuredText } from "react-datocms";
+import React from 'react';
+import { StructuredText } from 'react-datocms';
 
@@ -397,3 +404,3 @@ const Page = ({ data }) => {
 
-## Custom renderers
+## Custom renderers for inline records, blocks, and links
 
@@ -403,4 +410,4 @@ You can also pass custom renderers for special nodes (inline records, record links and blocks) as an optional parameter like so:
 ```js
-import React from "react";
-import { StructuredText, Image } from "react-datocms";
+import React from 'react';
+import { StructuredText, Image } from 'react-datocms';
 
@@ -471,3 +478,3 @@ const Page = ({ data }) => {
           switch (record.__typename) {
-            case "TeamMemberRecord":
+            case 'TeamMemberRecord':
               return <a href={`/team/${record.slug}`}>{record.firstName}</a>;
@@ -480,3 +487,3 @@ default:
           switch (record.__typename) {
-            case "TeamMemberRecord":
+            case 'TeamMemberRecord':
               return (
@@ -493,3 +500,3 @@ <a {...transformedMeta} href={`/team/${record.slug}`}>
           switch (record.__typename) {
-            case "ImageRecord":
+            case 'ImageRecord':
               return <Image data={record.image.responsiveImage} />;
@@ -531,3 +538,5 @@ default:
             image {
-              responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
+              responsiveImage(
+                imgixParams: { fit: crop, w: 300, h: 300, auto: format }
+              ) {
                 srcSet
@@ -555,2 +564,78 @@ webpSrcSet
 
+## Override default rendering of nodes
+
+This component automatically renders all nodes except for `inline_item`, `item_link` and `block` using a set of default rules, but you might want to customize those. For example:
+
+For example:
+
+- For `heading` nodes, you might want to add an anchor;
+- For `code` nodes, you might want to use a custom sytax highlighting component like [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer);
+- Apply different logic/formatting to a node based on what its parent node is (using the `ancestors` parameter)
+
+- For all possible node types, refer to the [list of typeguard functions defined in the main `structured-text` package](https://github.com/datocms/structured-text/tree/main/packages/utils#typescript-type-guards). The [DAST format documentation](https://www.datocms.com/docs/structured-text/dast) has additional details.
+
+In this case, you can easily override default rendering rules with the `customRules` prop.
+
+```jsx
+import { renderRule, StructuredText } from 'react-datocms';
+import { isHeading, isCode } from 'datocms-structured-text-utils';
+import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
+import SyntaxHighlight from 'components/SyntaxHighlight';
+
+<StructuredText
+  data={data.blogPost.content}
+  customRules={[
+    
+    // Add HTML anchors to heading levels for in-page navigation
+    renderRule(isHeading, ({ node, children, key }) => {
+      const HeadingTag = `h${node.level}`;
+      const anchor = toPlainText(node)
+        .toLowerCase()
+        .replace(/ /g, '-')
+        .replace(/[^\w-]+/g, '');
+
+      return (
+        <HeadingTag key={key}>
+          {children} <a id={anchor} />
+          <a href={`#${anchor}`} />
+        </HeadingTag>
+      );
+    }),
+    
+    // Use a custom syntax highlighter component for code blocks
+    renderRule(isCode, ({ node, key }) => {
+      return (
+        <SyntaxHighlight
+          key={key}
+          code={node.code}
+          language={node.language}
+          linesToBeHighlighted={node.highlight}
+        />
+      );
+    }),
+    
+    // Apply different formatting to top-level paragraphs
+    renderRule(
+      isParagraph,
+      ({ adapter: { renderNode }, node, children, key, ancestors }) => {
+        if (isRoot(ancestors[0])) {
+          // If this paragraph node is a top-level one, give it a special class
+          return renderNode('p', { key, className: 'top-level-paragraph-container-example' }, children);
+        } else {
+          // Proceed with default paragraph rendering...
+          // return renderNode('p', { key }, children);
+
+          // Or even completely remove the paragraph and directly render the inner children:
+          return children;
+        }
+      }
+    )
+    
+ 
+  ]}
+/>;
+```
+
+Note: if you override the rules for `inline_item`, `item_link` or `block` nodes, then the `renderInlineRecord`, `renderLinkToRecord` and `renderBlock` props won't be considered!
+
 ## Props
@@ -557,0 +642,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156051

increased by1.59%

Number of lines in readme file

637

increased by15.4%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

57

decreased by-1.72%

Dependency changes

• + Added@0no-co/graphql.web@1.1.1(transitive)

• + Added@babel/runtime@7.26.9(transitive)

• - Removed@0no-co/graphql.web@1.1.0(transitive)

• - Removed@babel/runtime@7.26.7(transitive)

• Updateddatocms-listen@^0.1.4