@unlimited-react-components/react-highlight

React component for highlighting js and jsx code

Usage no npm install needed!

<script type="module">
  import unlimitedReactComponentsReactHighlight from 'https://cdn.skypack.dev/@unlimited-react-components/react-highlight';
</script>

README

Unlimited React components logologo

React Highlight ✨🖍️

React component for highlighting js and jsx code

license npm latest package install size Coverage Status Build Status Known Vulnerabilities Total alerts Language grade: JavaScript

Sample result:

Sample result image

Installation

react-highlight is available as an npm package.

// with npm
npm i @unlimited-react-components/react-highlight

// or yran
yarn add @unlimited-react-components/react-highlight

Usage

Here is a quick example to get you started, it's all you need:

Edit Button

import "./styles.css";
import { Highligther } from "@unlimited-react-components/react-highlight";

const App = (props) => {
  return <Highlighter>{makeCode}</Highlighter>;
};
export default App;
const makeCode = `
    // this is a sample code
    const themes = {
      light: { ... },
      dark:  { ... }
    };
    const ThemeContext = React.createContext(themes.light);
    function App() {
      return (
        <ThemeContext.Provider value={themes.dark}>
          <Toolbar />
        </ThemeContext.Provider>
      );
    }
    function Toolbar(props) { ... }
    
    const ThemedButton =() => { ... }
`;

Props

Name Description Default
code The JSX code to be highlighted. ""
style The in-line CSS object. Only affects the container { }
children The JSX code to be highlighted in string format. ""
onCopyToClipboard A Funtion that is triggered when copy to clipboard button is clicked. Returns the copied code as a string as first parameter. undefined

License

This project is licensed under the terms of the MIT license.