@contember/react-client 1.0.0-rc.20 → 1.0.0-rc.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-client",
   "license": "Apache-2.0",
-  "version": "1.0.0-rc.20",
+  "version": "1.0.0-rc.21",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -19,7 +19,7 @@
   ],
   "typings": "./dist/types/index.d.ts",
   "dependencies": {
-    "@contember/client": "1.0.0-rc.20"
+    "@contember/client": "1.0.0-rc.21"
   },
   "peerDependencies": {
     "react": "^17"
@@ -27,5 +27,5 @@
   "scripts": {
     "build": "vite build --mode development && vite build --mode production"
   },
-  "readme": "# `@contember/react-client`\n\n## Usage\nIf you wish to communicate with any Contember API, wrap your code with the `ContemberClient` component:\n```tsx\nimport { ContemberClient } from '@contember/react-client'\n\n<ContemberClient\n\tapiBaseUrl=\"https://api.example.com\"\n\tproject=\"PROJECT-SLUG\"\n\tsessionToken=\"SESSION-TOKEN\"\n\tstage=\"STAGE-SLUG\"\n>\n  ...\n</ContemberClient>\n```\n\n## Notable APIs\nYou'll have to look at the code for now, sorry.\n- `<RichTextRenderer />`\n- `useFileUpload`\n- `useContentApiRequest` / `useTenantApiRequest` / `useSystemApiRequest`\n"
+  "readme": "# `@contember/react-client`\n\n## Usage\n\nIf you wish to communicate with any Contember API, wrap your code with the `ContemberClient` component:\n\n```tsx\nimport { ContemberClient } from '@contember/react-client'\n\n<ContemberClient\n\tapiBaseUrl=\"https://api.example.com\"\n\tproject=\"PROJECT-SLUG\"\n\tsessionToken=\"SESSION-TOKEN\"\n\tstage=\"STAGE-SLUG\"\n>\n\t...\n</ContemberClient>\n```\n\n## Notable APIs\n\nYou'll have to look at the code for now, sorry.\n\n- `<RichTextRenderer />`\n- `useFileUpload`\n- `useContentApiRequest` / `useTenantApiRequest` / `useSystemApiRequest`\n\n## RichTextRenderer\n\nHere is simple exmaple of how to use the `RichTextRenderer` component with custom references and elements.\n\n```tsx\nimport { RichTextRenderer } from '@contember/react-client'\nimport Image from './myComponents/Image'\nimport Gallery from './myComponents/Gallery'\nimport Quote from './myComponents/Quote'\nimport Link from './myComponents/Link'\n\n<RichTextRenderer\n\tsourceField=\"json\"\n\trenderElement={(props) => {\n\t\tif (props.element.type === 'link' && props.reference) {\n\t\t\treturn <Link label={props.element.children[0].text} url={props.reference.target} />\n\t\t}\n\n\t\treturn props.fallback\n\t}}\n\treferenceRenderers={{\n\t\timage: (reference) => <Image reference={reference} />,\n\t\tgallery: (reference) => <Gallery reference={reference} />,\n\t\tquote: (reference) => <Quote reference={reference} />,\n\t}}\n/>\n```\n\n| Prop                 | Description                                           |\n| -------------------- | ----------------------------------------------------- |\n| `sourceField`        | The field in the GraphQL that contains the rich text. |\n| `renderElement`      | Function that renders an element.                     |\n| `referenceRenderers` | Object that maps reference types to renderers.        |\n"
 }

package/readme.md

@@ -1,7 +1,9 @@
 # `@contember/react-client`
 
 ## Usage
+
 If you wish to communicate with any Contember API, wrap your code with the `ContemberClient` component:
+
 ```tsx
 import { ContemberClient } from '@contember/react-client'
 
@@ -11,12 +13,48 @@ import { ContemberClient } from '@contember/react-client'
 	sessionToken="SESSION-TOKEN"
 	stage="STAGE-SLUG"
 >
-  ...
+	...
 </ContemberClient>
 ```
 
 ## Notable APIs
+
 You'll have to look at the code for now, sorry.
+
 - `<RichTextRenderer />`
 - `useFileUpload`
 - `useContentApiRequest` / `useTenantApiRequest` / `useSystemApiRequest`
+
+## RichTextRenderer
+
+Here is simple exmaple of how to use the `RichTextRenderer` component with custom references and elements.
+
+```tsx
+import { RichTextRenderer } from '@contember/react-client'
+import Image from './myComponents/Image'
+import Gallery from './myComponents/Gallery'
+import Quote from './myComponents/Quote'
+import Link from './myComponents/Link'
+
+<RichTextRenderer
+	sourceField="json"
+	renderElement={(props) => {
+		if (props.element.type === 'link' && props.reference) {
+			return <Link label={props.element.children[0].text} url={props.reference.target} />
+		}
+
+		return props.fallback
+	}}
+	referenceRenderers={{
+		image: (reference) => <Image reference={reference} />,
+		gallery: (reference) => <Gallery reference={reference} />,
+		quote: (reference) => <Quote reference={reference} />,
+	}}
+/>
+```
+
+| Prop                 | Description                                           |
+| -------------------- | ----------------------------------------------------- |
+| `sourceField`        | The field in the GraphQL that contains the rich text. |
+| `renderElement`      | Function that renders an element.                     |
+| `referenceRenderers` | Object that maps reference types to renderers.        |