@puzzlelabs/puzzle-glossary-react v0.8.0
Puzzle Glossary
Puzzle Labs is an AI content workflow engine. It lies at the intersection of people, processes, and technology used to improve teams’ content workflows. Teams get a 10x accelerating boost to their content operations processes by using Puzzle.
Recommended Install
npm install @puzzlelabs/puzzle-glossary @puzzlelabs/puzzle-glossary-react
Highlight Widget Example
import {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import {HighlightZone} from "@puzzlelabs/puzzle-glossary-react";
import {highlightWidgetManager} from "@puzzlelabs/puzzle-glossary";
import {defineCustomElements} from '@puzzlelabs/puzzle-glossary/dist/loader';
defineCustomElements();
const App = () => (
<HighlightZone as='p'>
Search openai We are on the verge of a creative renaissance.
</HighlightZone>
);
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App/>
</StrictMode>
);
// For react you not needed specify selectors
highlightWidgetManager.config = {
hasMarkAll: true,
puzzleBranding: true,
hasMarkHyperlink: true,
callToAction: {
text: 'CTA',
link: 'https://puzzlelabs.ai',
},
};
highlightWidgetManager.theme = {
mode: 'light',
// fontFamily: 'Inter',
// marker: {
// color: 'black',
// type: 'highlight',
// },
// resource: {
// color: 'black',
// },
// callToAction: {
// color: 'black',
// backgroundColor: 'black',
// },
// modal: {
// primaryColor: 'black',
// secondaryColor: 'black',
// backgroundColor: 'black',
// }
};
highlightWidgetManager.handlers = {
onCopyClick: console.log,
onMarkerHover: console.log,
onMarkerClick: console.log,
onResourceClick: console.log,
onCtaClick: console.log,
onEvent: console.log,
}
// For react you need call only init without mark
highlightWidgetManager.init('6437d691b3c98451b429460f');
Page Widget Example
import './index.css';
import {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import {PageWidget} from "@puzzlelabs/puzzle-glossary-react";
import {defineCustomElements} from '@puzzlelabs/puzzle-glossary/dist/loader';
defineCustomElements();
// For remix use this method of component initialization
// import {defineCustomElementsFromUnPkg} from "@puzzlelabs/puzzle-glossary";
// defineCustomElementsFromUnPkg();
const PageWidgetExample = () => (
<PageWidget apiKey='6437d691b3c98451b429460f'/>
)
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<PageWidgetExample/>
</StrictMode>
);
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
12 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago