React component library for displaying code samples with syntax highlighting!!

Overview

react-code-samples

usage example:

import {} from 'react-code-samples';
import 'highlight.js/styles/default.css'; // or use another highlight js style

<Snippet
  code={[
    {
      code: `
            console.log("hello world");
            `,
      language: 'javascript',
    },
    {
      code: `
              println!("Hello, world!");
            `,
      language: 'rust',
    },
    {
      code: `
              fmt.Println("Hello, world!")
            `,
      language: 'go',
    },
  ]}
  style={{
    width: '100%',
    height: '100%',
  }}
/>;

"THIS IS GAME HANGING" โ€“ @sarthaktexas

You might also like...

This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

May 15, 2022

The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power apps.

The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power apps.

Power CAT code components The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power a

Jan 2, 2023

n.code react application context library

ncode_react_lib Install yarn add @ncodedcode/ncode_react_lib index.tsx import React from "react"; // add this NCApplicationContext.createContext(new

Feb 4, 2022

This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

React-compress This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundl

Jan 6, 2023

๐Ÿ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

๐Ÿ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Jan 4, 2023

The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jan 3, 2023

A Higher Order Component using react-redux to keep form state in a Redux store

A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Jan 3, 2023

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Jan 5, 2023

Markdown component for React

react-markdown Markdown component for React using remark. Learn markdown here and check out the demo here. Install npm: npm install react-markdown Why

Jan 4, 2023
Owner
Pranav Teegavarapu
I'm a 16 year old full stack developer building @kobra-dev!
Pranav Teegavarapu
Bdc-walkthrough - An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way.

Material walk-through library An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way. Show Demo Prerequis

Broadcom Inc 65 Dec 14, 2022
Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = โค๏ธ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Samuel Liedtke 147 Jan 7, 2023
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip โœ… React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation โŒจ๏ธ React Too

Marc Ramos 1 Dec 22, 2021
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil ยท Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Uber Open Source 8.1k Dec 29, 2022
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Fakorede Boluwatife 38 Dec 30, 2022
Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Conor Broaders 3 Oct 11, 2021
Companion React+TypeScript code for my Intro to TypeScript EmergentWorks workshop, bootstrapped with yarn + create-react-app! โœจ

Getting Started with Create React App This project was bootstrapped with Create React App. Companion repository to https://github.com/JoshuaKGoldberg/

Josh Goldberg 2 Dec 21, 2022