Related Projects

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  •    Javascript

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.

Pygments - Syntax Highlighter in Python

  •    Python

Pygments is a generic syntax highlighter for general use in all kinds of software such as forum systems, wikis or other applications that need to prettify source code. It supports all common programming languages. It will take source code (or other markup) in a supported language and output a processed version (in different formats) containing syntax highlighting markup. It suports a number of output formats like HTML, RTF, LaTeX and ANSI sequences (console output).

react-highlight - React component for syntax highlighting

  •    Javascript

The styles will most likely be in node_modules/highlight.js/styles folder. Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.

react-webworker - ⚙️ Communicate with a Web Worker from React

  •    Javascript

Easy communication with a Web Worker or Service Worker from React. React component for easy communication with a Web Worker. Leverages the Render Props pattern for ultimate flexibility as well as the new Context API for ease of use. Just specify the public url to your Web Worker and you'll get access to any messages or errors it sends, as well as the postMessage handler. Also works with Service Workers.

react-google-maps - React.js Google Maps integration component

  •    Javascript

The changelog is automatically generated via standard-version and can be found in project root as well as npm tarball. Please, be noted, no one, I mean, no one, is obligated to help you in ANY means. Your time is valuable, so does our contributors. Don't waste our time posting questions like “how do I do X with React-Google-Maps” and “my code doesn't work”. This is not the primary purpose of the issue tracker. Don't abuse.

loadable-components - React code splitting made easy ✂️✨

  •    Javascript

React code splitting made easy. Reduce your bundle size without stress ✂️✨. Webpack allows modern code splitting via the dynamic import syntax. Loadable Components makes it possible to use that awesome feature with React. It is compatible with react-router and server side rendering. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.

react-hyperscript - Hyperscript syntax for React.js markup

  •    Javascript

Hyperscript syntax for React.js markup. If you're using React 0.11, use react-hyperscript 1.x.x. For later versions, use react-hyperscript 2.x.x.

react-templates - Light weight templates for react

  •    Javascript

Lightweight templates for React. React Templates compiles an *.rt file (react template file - an extended HTML format) into a JavaScript file. This file, which uses AMD syntax, returns a function. When invoked, this function returns a virtual React DOM based on React.DOM elements and custom user components.

jquery-syntaxhighlighter - jQuery Extension for Google's Prettify Syntax Highlighter

  •    Javascript

jQuery Extension for Google's Prettify Syntax Highlighter

react-codemirror2 - Codemirror integrated components for React

  •    TypeScript

react-codemirror2 ships with the notion of an uncontrolled and controlled component. UnControlled consists of a simple wrapper largely powered by the inner workings of codemirror itself, while Controlled will demand state management from the user, preventing codemirror changes unless properly handled via value. The latter will offer more control and likely be more appropriate with redux heavy apps. Since codemirror ships mostly unconfigured, the user is left with the responsibility for requiring any additional resources should they be necessary. This is often the case when specifying certain language modes and themes. How to import/require these assets will vary according to the specifics of your development environment. Below is a sample to include the assets necessary to specify a mode of xml (HTML) and a material theme.

jsx-control-statements - Neater If and For for React JSX

  •    Javascript

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null. Developers coming to React from using JavaScript templating libraries like Handlebars are often surprised that there's no built-in looping or conditional syntax. This is by design - JSX by is not a templating library, it's declarative syntactic sugar over functional JavaScript expressions. JSX Control Statements follows the same principle - it provides a component-like syntax that keeps your render functions neat and readable, but desugars into clean, readable JavaScript.

google-maps-react - Companion code to the "How to Write a Google Maps React Component" Tutorial

  •    Javascript

A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team. See the demo and accompanying blog post.

react-native-conductor - Orchestrate animations across components in one place

  •    Javascript

Not a new animation syntax, but a way to organize your code to make Animated easier to work with. Animation code is condensed into a wrapper component that feeds Animated styles to its children. I wrote this to address the fact that Animated code can get bulky and difficult to coordinate between subcomponents.

prism - React / Redux action composition made simple

  •    TypeScript

Given function f and function g we can simply compose them: f ∘ g = f(g()). Yes we can! Let's just call it action wrapping. Because it's the same principle like you would be wrapping a box inside a box, the last box in the hierarchy contains some object and that's the Action. We can just wrap action type to keep things simple and because action type is just a string, it's as easy as function composition.

Prism - Lightweight, robust, elegant syntax highlighting

  •    Javascript

Prism is a lightweight, robust, elegant syntax highlighting library. It's a spin-off project from Dabblet. The core is 2KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB. Define new languages or extend existing ones. Add new features thanks to Prism’s plugin architecture. It supports parallelism with Web Workers, if available. All styling is done through CSS, with sensible class names like .comment, .string, .property etc

react-planner - :pencil2: A React Component for plans design

  •    Javascript

react-planner is a React component which can be used to draw model buildings. Drag & drop from a catalog of customizable and ready-to-use objects, you can start from 2D wireframes and land on 3D models. As a developer you can provide your users with new objects by adding them to the catalog.

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.