https://github.com/kunyan/react-code-container

https://github.com/kunyan/react-code-container

react

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/kunyan/react-code-container
• Owner: kunyan
• Created: 2020-07-11T10:20:24.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-11-28T16:21:40.000Z (6 months ago)
• Last Synced: 2024-11-28T17:26:44.756Z (6 months ago)
• Topics: react
• Language: TypeScript
• Homepage: https://kunyan.github.io/react-code-container/
• Size: 9.83 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-code-container

[![NPM](https://img.shields.io/npm/v/react-code-container.svg)](https://www.npmjs.com/package/react-code-container) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![image](.github/screenshot.png)

## Install

```bash

npm install --save react-code-container

```

## Usage

```tsx

import React, { useState } from 'react';

import 'react-code-container/dist/styles/base.css';

import 'highlight.js/styles/atom-one-dark.css'; // Find any highlight style you need

import ReactCodeContainer from 'react-code-container';

export default () => {

  const [language, setLanguage] = useState('jsx');

  const [showLineNumber, setShowLineNumber] = useState(true);

  const code = `export function hello() => {

    console.log("Hello world")

  }`;

  return (

    

  );

};

```

## Configuration

| Option              | Required | Default | Description                                     |

| ------------------- | -------- | ------- | ----------------------------------------------- |

| `code`              | required |         | Your code which want to display                 |

| `showLineNumber`    | optional | `true`  | You can turn on / off line number               |

| `language`          | optional |         | Leave empty will use auto detect                |

| `onLineNumberClick` | optional |         | The callback function if you clicked lineNumber |

## License

MIT © [Kun Yan](https://github.com/kunyan)