{"_id":"@react-code-view/react","_rev":"3-e15e904cbd278f8424e7d6a8363ac5a0","name":"@react-code-view/react","dist-tags":{"latest":"3.1.0"},"versions":{"3.0.0":{"name":"@react-code-view/react","version":"3.0.0","keywords":["react","code-view","markdown","preview","live-editor"],"license":"MIT","_id":"@react-code-view/react@3.0.0","maintainers":[{"name":"simonguo","email":"simonguo.2009@gmail.com"}],"homepage":"https://github.com/simonguo/react-code-view#readme","bugs":{"url":"https://github.com/simonguo/react-code-view/issues"},"dist":{"shasum":"2ba35c65c6df654a07cfa995b776562374a3d805","tarball":"https://registry.npmjs.org/@react-code-view/react/-/react-3.0.0.tgz","fileCount":10,"integrity":"sha512-Ub1U2Nqijh2HooFjatoveF24h0Oot0BmRdZEJiPwdt94Dz7ps4U5UhF6F7oiQI6tgM9QJRg21LDC5d5LRNRM5Q==","signatures":[{"sig":"MEUCIF89Mb7J8CXzy0rvAHD1hBam0sev+k6VlvWks5HMF4anAiEA/eyN5u7zMMCoYY5xh69tqTpCVUt80PcH02308lvzeZM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@react-code-view%2freact@3.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":160872},"main":"./dist/index.cjs","type":"module","_from":"file:react-code-view-react-3.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./styles/index.css","./styles/*":"./styles/*"},"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","clean":"rimraf dist","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"simonguo","email":"simonguo.2009@gmail.com"},"_resolved":"/tmp/c7e1e6f8bb45055cb4618ef92b70ccde/react-code-view-react-3.0.0.tgz","_integrity":"sha512-Ub1U2Nqijh2HooFjatoveF24h0Oot0BmRdZEJiPwdt94Dz7ps4U5UhF6F7oiQI6tgM9QJRg21LDC5d5LRNRM5Q==","repository":{"url":"git+https://github.com/simonguo/react-code-view.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React components for rendering code with live preview","directories":{},"sideEffects":["*.css","*.less"],"_nodeVersion":"18.20.8","dependencies":{"sucrase":"^3.35.0","classnames":"^2.5.0","@codemirror/lint":"^6.8.3","@codemirror/view":"^6.34.3","@codemirror/state":"^6.4.1","copy-to-clipboard":"^3.3.3","@codemirror/search":"^6.5.8","@codemirror/commands":"^6.7.1","@codemirror/lang-css":"^6.3.1","@codemirror/language":"^6.10.4","@codemirror/lang-html":"^6.4.9","@codemirror/lang-json":"^6.0.1","@react-code-view/core":"3.0.0","@codemirror/autocomplete":"^6.18.3","@codemirror/lang-markdown":"^6.3.1","@codemirror/theme-one-dark":"^6.1.2","@codemirror/lang-javascript":"^6.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.0","less":"^4.2.0","tsup":"^8.0.0","jsdom":"^23.0.0","react":"^18.2.0","rimraf":"^5.0.0","vitest":"^1.0.0","cssnano":"^6.0.0","gulp-less":"^5.0.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","autoprefixer":"^10.4.0","gulp-postcss":"^10.0.0","@types/react-dom":"^18.2.0","@types/codemirror":"^5.60.0","@vitejs/plugin-react":"^4.2.0","@testing-library/react":"^14.0.0","@testing-library/jest-dom":"^6.1.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_3.0.0_1766990977081_0.4479769126513977","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@react-code-view/react","version":"3.0.1","keywords":["react","code-view","markdown","preview","live-editor"],"license":"MIT","_id":"@react-code-view/react@3.0.1","maintainers":[{"name":"simonguo","email":"simonguo.2009@gmail.com"}],"homepage":"https://github.com/simonguo/react-code-view#readme","bugs":{"url":"https://github.com/simonguo/react-code-view/issues"},"dist":{"shasum":"f95a71214c97974ea71a0cd26855d75b79d8a53a","tarball":"https://registry.npmjs.org/@react-code-view/react/-/react-3.0.1.tgz","fileCount":10,"integrity":"sha512-QAQG96U6gLeAALDVLHKOQxVsccNOxeBqFUaOAbAqpwYq287N6OKW9lNRyPo2KBpMEi21UWCKTQ/hQvpFRTNAAQ==","signatures":[{"sig":"MEQCIEXFEB5EZ3BeaJ+0bp6LY+m3zQCyDGBXwHc9LaHHSsV5AiA860uoeUOaMVE3sdLt0Z/RbCAzHuXewz8kkGS4f9JehQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@react-code-view%2freact@3.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":169751},"main":"./dist/index.cjs","type":"module","_from":"file:react-code-view-react-3.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./styles/index.css","./styles/*":"./styles/*"},"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","clean":"rimraf dist","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"simonguo","email":"simonguo.2009@gmail.com"},"_resolved":"/tmp/58b9fa97e7ab119639effc4ad0ed4628/react-code-view-react-3.0.1.tgz","_integrity":"sha512-QAQG96U6gLeAALDVLHKOQxVsccNOxeBqFUaOAbAqpwYq287N6OKW9lNRyPo2KBpMEi21UWCKTQ/hQvpFRTNAAQ==","repository":{"url":"git+https://github.com/simonguo/react-code-view.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React components for rendering code with live preview","directories":{},"sideEffects":["*.css","*.less"],"_nodeVersion":"18.20.8","dependencies":{"sucrase":"^3.35.0","classnames":"^2.5.0","@codemirror/lint":"^6.8.3","@codemirror/view":"^6.34.3","@codemirror/state":"^6.4.1","copy-to-clipboard":"^3.3.3","@codemirror/search":"^6.5.8","@codemirror/commands":"^6.7.1","@codemirror/lang-css":"^6.3.1","@codemirror/language":"^6.10.4","@codemirror/lang-html":"^6.4.9","@codemirror/lang-json":"^6.0.1","@react-code-view/core":"3.0.1","@codemirror/autocomplete":"^6.18.3","@codemirror/lang-markdown":"^6.3.1","@codemirror/theme-one-dark":"^6.1.2","@codemirror/lang-javascript":"^6.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.0","less":"^4.2.0","tsup":"^8.0.0","jsdom":"^23.0.0","react":"^18.2.0","rimraf":"^5.0.0","vitest":"^1.0.0","cssnano":"^6.0.0","gulp-less":"^5.0.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","autoprefixer":"^10.4.0","gulp-postcss":"^10.0.0","@types/react-dom":"^18.2.0","@types/codemirror":"^5.60.0","@vitejs/plugin-react":"^4.2.0","@testing-library/react":"^14.0.0","@testing-library/jest-dom":"^6.1.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_3.0.1_1767064296284_0.7473858366808299","host":"s3://npm-registry-packages-npm-production"}},"3.1.0":{"name":"@react-code-view/react","version":"3.1.0","description":"React components for rendering code with live preview","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./styles/index.css","./styles/*":"./styles/*"},"sideEffects":["*.css","*.less"],"dependencies":{"@codemirror/state":"^6.4.1","@codemirror/view":"^6.34.3","@codemirror/commands":"^6.7.1","@codemirror/language":"^6.10.4","@codemirror/search":"^6.5.8","@codemirror/autocomplete":"^6.18.3","@codemirror/lint":"^6.8.3","@codemirror/lang-javascript":"^6.2.2","@codemirror/lang-css":"^6.3.1","@codemirror/lang-html":"^6.4.9","@codemirror/lang-json":"^6.0.1","@codemirror/lang-markdown":"^6.3.1","@codemirror/theme-one-dark":"^6.1.2","classnames":"^2.5.0","copy-to-clipboard":"^3.3.3","sucrase":"^3.35.0","@react-code-view/core":"3.1.0"},"devDependencies":{"@testing-library/jest-dom":"^6.1.0","@testing-library/react":"^14.0.0","@types/codemirror":"^5.60.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0","autoprefixer":"^10.4.0","cssnano":"^6.0.0","gulp":"^4.0.0","gulp-less":"^5.0.0","gulp-postcss":"^10.0.0","jsdom":"^23.0.0","less":"^4.2.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^5.0.0","tsup":"^8.0.0","typescript":"^5.3.0","vitest":"^1.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"keywords":["react","code-view","markdown","preview","live-editor"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/simonguo/react-code-view.git","directory":"packages/react"},"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","clean":"rimraf dist"},"_id":"@react-code-view/react@3.1.0","bugs":{"url":"https://github.com/simonguo/react-code-view/issues"},"homepage":"https://github.com/simonguo/react-code-view#readme","_integrity":"sha512-FD1QwzhYT1vCkdigPWgkMyjJBmXc3Vu5iOJNskP08xP+HOaBUPQeBPN+UXdxGb1Ih13yjbzVQ3vXDpBMgILgtg==","_resolved":"/tmp/6d966d51a8b99038436950d1e8b2b719/react-code-view-react-3.1.0.tgz","_from":"file:react-code-view-react-3.1.0.tgz","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-FD1QwzhYT1vCkdigPWgkMyjJBmXc3Vu5iOJNskP08xP+HOaBUPQeBPN+UXdxGb1Ih13yjbzVQ3vXDpBMgILgtg==","shasum":"7613fc06d1bdd1a934ab46a1f98c0bbc3a64bc64","tarball":"https://registry.npmjs.org/@react-code-view/react/-/react-3.1.0.tgz","fileCount":10,"unpackedSize":169666,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@react-code-view%2freact@3.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCDL5UEXtlwn8fBgSCaeKNAnchjPJD2zj8HbsXWsZXcswIgGIrWyt6zSR2wEb8azna4PLd+9GKIo5d1A4yCsqvMerQ="}]},"_npmUser":{"name":"simonguo","email":"simonguo.2009@gmail.com"},"directories":{},"maintainers":[{"name":"simonguo","email":"simonguo.2009@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_3.1.0_1767501689138_0.2207389663803867"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-29T06:49:36.986Z","modified":"2026-01-04T04:41:30.295Z","3.0.0":"2025-12-29T06:49:37.220Z","3.0.1":"2025-12-30T03:11:36.430Z","3.1.0":"2026-01-04T04:41:29.315Z"},"bugs":{"url":"https://github.com/simonguo/react-code-view/issues"},"license":"MIT","homepage":"https://github.com/simonguo/react-code-view#readme","keywords":["react","code-view","markdown","preview","live-editor"],"repository":{"type":"git","url":"git+https://github.com/simonguo/react-code-view.git","directory":"packages/react"},"description":"React components for rendering code with live preview","maintainers":[{"name":"simonguo","email":"simonguo.2009@gmail.com"}],"readme":"# @react-code-view/react\n\nReact components for rendering code with live preview and syntax highlighting.\n\n## Installation\n\n```bash\npnpm add @react-code-view/react @react-code-view/core\n# or\nnpm install @react-code-view/react @react-code-view/core\n```\n\n## Quick Start\n\n```tsx\nimport { CodeView } from '@react-code-view/react';\nimport '@react-code-view/react/styles/index.css';\n\nfunction App() {\n  const code = `\n<Button color=\"primary\">\n  Click me\n</Button>\n  `.trim();\n\n  return (\n    <CodeView \n      dependencies={{ Button }}\n      language=\"jsx\"\n    >\n      {code}\n    </CodeView>\n  );\n}\n```\n\n## Components\n\n### CodeView\n\nThe main component for displaying and executing React code.\n\n```tsx\nimport { CodeView } from '@react-code-view/react';\n\n<CodeView\n  dependencies={{ Button, Icon }}  // Components available in code\n  language=\"jsx\"                    // Syntax highlighting language\n  editable={true}                   // Enable code editing\n  renderPreview={true}              // Show live preview\n  showLineNumbers={true}            // Show line numbers\n  showCopyButton={true}             // Show copy button\n  theme=\"rcv-theme-dark\"            // Theme class\n  beforeCompile={(code) => code}    // Transform before compile\n  afterCompile={(code) => code}     // Transform after compile\n  onChange={(code) => {}}           // Code change callback\n  onError={(error) => {}}           // Error callback\n>\n  {sourceCode}\n</CodeView>\n```\n\n### Renderer\n\nSyntax-highlighted code renderer.\n\n```tsx\nimport { Renderer } from '@react-code-view/react';\n\n<Renderer\n  code={sourceCode}\n  language=\"typescript\"\n  showLineNumbers={true}\n/>\n```\n\n### MarkdownRenderer\n\nRender markdown with syntax highlighting.\n\n```tsx\nimport { MarkdownRenderer } from '@react-code-view/react';\n\n<MarkdownRenderer>\n  {markdownContent}\n</MarkdownRenderer>\n```\n\n### CodeEditor\n\nEditable code component with optional CodeMirror support.\n\n```tsx\nimport { CodeEditor } from '@react-code-view/react';\n\n<CodeEditor\n  code={sourceCode}\n  onChange={(newCode) => setCode(newCode)}\n  language=\"javascript\"\n  readOnly={false}\n/>\n```\n\n### Preview\n\nComponent for displaying executed code output.\n\n```tsx\nimport { Preview } from '@react-code-view/react';\n\n<Preview error={error}>\n  {renderedElement}\n</Preview>\n```\n\n### CopyCodeButton\n\nButton to copy code to clipboard.\n\n```tsx\nimport { CopyCodeButton } from '@react-code-view/react';\n\n<CopyCodeButton code={sourceCode} />\n```\n\n### ErrorBoundary\n\nCatch and display errors in child components.\n\n```tsx\nimport { ErrorBoundary } from '@react-code-view/react';\n\n<ErrorBoundary onError={(error) => console.error(error)}>\n  {children}\n</ErrorBoundary>\n```\n\n## Hooks\n\n### useCodeExecution\n\nHook for executing code and capturing rendered output.\n\n```tsx\nimport { useCodeExecution } from '@react-code-view/react';\n\nfunction CustomCodeView({ initialCode, dependencies }) {\n  const { element, error, code, setCode, execute } = useCodeExecution(\n    initialCode,\n    {\n      dependencies,\n      onError: (err) => console.error(err)\n    }\n  );\n\n  return (\n    <div>\n      {error ? <pre>{error.message}</pre> : element}\n      <textarea value={code} onChange={(e) => setCode(e.target.value)} />\n    </div>\n  );\n}\n```\n\n## Utilities\n\n```tsx\nimport { \n  canUseDOM,    // Check if DOM is available\n  evalCode,     // Execute code string\n  parseHTML,    // Parse HTML string\n  parseDom,     // Parse DOM nodes\n  mergeRefs     // Merge multiple refs\n} from '@react-code-view/react';\n```\n\n## Icons\n\n```tsx\nimport { CheckIcon, CodeIcon, CopyIcon } from '@react-code-view/react';\n```\n\n## Theming\n\nThe package includes CSS custom properties for theming:\n\n```css\n.rcv-code-view {\n  --rcv-color-bg: #ffffff;\n  --rcv-color-bg-code: #f6f8fa;\n  --rcv-color-text: #24292f;\n  --rcv-color-border: #d0d7de;\n  --rcv-color-primary: #0969da;\n  --rcv-color-error: #cf222e;\n  /* ... more variables */\n}\n\n/* Dark theme */\n.rcv-theme-dark {\n  --rcv-color-bg: #0d1117;\n  --rcv-color-bg-code: #161b22;\n  /* ... */\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}