{"library":"react-refractor","title":"React Refractor - Syntax Highlighter","description":"react-refractor is a lightweight React component for syntax highlighting code snippets, acting as a thin wrapper around the `refractor` library. `refractor` itself is a virtual DOM implementation of `Prism.js`, allowing for efficient updates and server-side rendering without direct DOM manipulation. The current stable version is v4.0.0, which dropped Node.js 18 support and upgraded to `refractor` v5. The library maintains a moderately active release cadence, with several minor and major versions released within the last year. A key differentiator is its VDOM-based approach, which makes it performant and flexible for React environments but also means it's incompatible with `Prism.js` plugins. Developers must explicitly import and register specific language syntaxes from `refractor` to keep bundle sizes small, and styling is left to the developer, often by importing `Prism.js` themes. It requires React 18+ and is ESM-only since v3.0.0.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-refractor"],"cli":null},"imports":["import { Refractor } from 'react-refractor'","import { registerLanguage } from 'react-refractor'","import js from 'refractor/lang/javascript'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Refractor, registerLanguage } from 'react-refractor';\n\n// Import desired languages from 'refractor' and register them\nimport js from 'refractor/lang/javascript';\nimport php from 'refractor/lang/php';\nimport css from 'refractor/lang/css';\n\nregisterLanguage(js);\nregisterLanguage(php);\nregisterLanguage(css);\n\n// A simple PrismJS theme can be included for basic styling\n// This would typically be imported from a CSS file like: import 'prismjs/themes/prism-dark.css';\n// For demonstration, we'll just show the component usage.\n\nfunction App() {\n  const jsCode = `\nconst greet = (name) => {\n  console.log('Hello, ' + name + '!');\n};\ngreet('World');\n`;\n\n  const phpCode = `\n<?php\n  $name = \"PHP\";\n  echo \"Hello, \" . $name . \"!\";\n?>\n`;\n\n  return (\n    <div>\n      <h2>JavaScript Example</h2>\n      <Refractor language=\"javascript\" value={jsCode} />\n\n      <h2>PHP Example</h2>\n      <Refractor language=\"php\" value={phpCode} />\n\n      <p>Note: Stylesheets are not automatically handled; apply your own Prism.js-compatible theme.</p>\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') || document.createElement('div'));\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates how to install `react-refractor`, register multiple language syntaxes (JavaScript, PHP, CSS) from `refractor`, and render code snippets using the `Refractor` component. It highlights the explicit language registration process and the component's basic usage with `language` and `value` props.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}