DEV Community: reactjsfav

5 Awesome JavaScript HTTP Clients

reactjsfav — Fri, 18 Mar 2022 02:35:37 +0000

Name	Description	GitHub Activity
Axios	Promise based HTTP client for the browser and node.js
node-fetch	A light-weight module that brings the Fetch API to Node.js
Got	🌐 Human-friendly and powerful HTTP request library for Node.js
superagent	Ajax for Node.js and browsers (JS HTTP client)
Needle	Nimble, streamable HTTP client for Node.js. With proxy, iconv, cookie, deflate & multipart support.

Source: 5 Awesome JavaScript HTTP Clients

A curated list of awesome frameworks

reactjsfav — Mon, 27 Dec 2021 15:34:46 +0000

A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS.https://cssrepo.com/

React Chart - Display data in charts

reactjsfav — Wed, 08 Dec 2021 14:25:24 +0000

Display data in charts / graphs / diagrams

chartify - React.js plugin for building animated draggable and customizable charts.
essential js 2 charts - Beautiful and interactive charts & graphs for react.
jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
react-chartist - React component for Chartist.js.
react-charty - demo - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
react-chartjs-2 - Common react charting components using Chart.js 2.0.
react-d3-components - D3 Components for React.
react-dazzle - Dashboards made easy in React JS.
react-google-charts - React-google-charts React component.
react-highcharts - React-highcharts.
react-sigmajs - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
react-sparklines - Beautiful and expressive Sparklines React component.
react-timeseries-charts - Declarative timeseries charts.
react-vis - Data visualization library based on React and d3.
recharts - Redefined chart library built with React and D3.
rumble-charts - React components for building composable and flexible charts.
victory - Data viz for React.
semiotic - Semiotic is a data visualization framework for React.
DevExtreme React Chart - High-performance plugin-based chart for Bootstrap and Material Design.
Smart React Chart - Feature complete Charting library.
react-muze - React wrapper for muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
React Charts - The Best 104 React Charts Libraries

React Libraries

reactjsfav — Tue, 07 Dec 2021 14:25:00 +0000

React Libraries

react-border-wrapper - A wrapper for placing elements along div borders in React.
react-magic - Automatically AJAXify plain HTML with the power of React
react-toolbox - A set of React components implementing Google's Material Design specification
tcomb-react - Library allowing you to check all the props of your React components
react-responsive - Media queries in react for responsive design
preact - Fast 3kb React alternative with the same ES6 API.
riotjs - A React-like, 3.5KB user interface library
Maple.js - Bringing the concept of web-components to React
react-i13n - A performant, scalable and pluggable approach to instrumenting your React application
react-icons - svg react icons of popular icon packs
react-open-doodles - Awesome free illustrations as react components.
Keo - Plain functions for a more functional Deku approach to creating React components, with functional goodies such as pipe, memoize, etc...
Bit - A virtual repository for managing and using react and other web components across applications
AtlasKit - Atlassian's React UI library
ReactiveSearch - UI components library for Elasticsearch
Slate - A completely customizable framework for building rich text editors.
react-json-schema - Construct React elements from JSON by mapping JSON definitions to React components that you expose.
react-lodash - Lodash as React components
react-helmet - A document head manager for React
react-snap - Zero-configuration framework-agnostic static prerendering for SPAs
Draft.js - A React framework for building text editors
refract - Harness the power of reactive programming to supercharge your components
react-desktop - OS X and Windows UI components built with React
reapop - A simple and customizable React notifications system
react-extras - Useful components and utilities for working with React
react-instantsearch - Lightning-fast search for React and React Native applications, by Algolia
uppy - The next open source file uploader for web browsers
react-motion - A spring that solves your animation problems
react-esi - React Edge Side Includes
react-aria - Adobe's library of React Hooks that provides accessible UI primitives for your design system
react-uploady - Modern file-upload components & hooks for React.

React Awesome Components

reactjsfav — Mon, 06 Dec 2021 15:34:40 +0000

react-select - The Select Component for React
react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
react-dnd - Drag and Drop for React
react-grid-layout - A draggable and resizable grid layout with responsive breakpoints
react-table - A lightweight, fast and extendable datagrid for React
react-data-grid - Excel-like grid component built with React
react-draggable - React draggable component
react-resizable-and-movable - A resizable and draggable component for React
react-resizable - A simple React component that is resizable with a handle
react-resizable-box - A resizable component for React
react-searchbox-awesome - Minimalistic searchbox
react-sortable-pane - A sortable and resizable pane component for React
react-spaces - Nestable resizable, anchored, scrollable components
react-dates - An easily internationalizable, mobile-friendly datepicker library for the web
react-big-calendar - Calendar component
react-datepicker - ReactJS Datepicker
react-list - A versatile infinite scroll React component
react-intl - Internationalize React apps
react-i18next - Internationalization for React done right
react-aria-modal - A fully accessible React modal
react-hotkeys - Declarative hotkey and focus area management for React
react-keydown - Lightweight keydown wrapper for React components
react-joyride - Create guided tours for your apps
react-virtualized - React components for efficiently rendering large lists and tabular data
react-window - React components for efficiently rendering large lists and tabular data
react-text-mask - Input mask for React
react-loading-skeleton - Create skeleton screens that automatically adapt to your app
react-spinkit - A collection of loading indicators animated with CSS for React
rheostat - Accessible slider component built with React
qrcode.react - QR component for use with React
react-archer - Draw arrows between React elements
react-pdf-viewer - A PDF viewer made for React
react-parallax-tilt - Easily apply tilt hover effect on React components
react-popper - Position tooltips and popovers in an elegant, performant manner
react-tsparticles - Easily create highly customizable particles animations
react-spring - Spring-physics based animation library for React applications
framer-motion - A React library to power production-ready animations
react-accessible-accordion - React Component for creating an 'Accordion' that adheres to the WAI ARIA spec for accessibility.
react-truncate-markup - React component for truncating JSX markup.
react-cookie - Universal cookies for React
react-slick - Carousel component built with React
react-gtm-module - Google Tag Manager Module for React
react-device-detect - Detect device for React
react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component
react-modal - Accessible modal dialog component for React
cleave.js - Format input text content when you are typing
react-fontawesome - Font Awesome 5 React component
react-advanced-cropper - An advanced React component for image cropping

Awesome React Resources

reactjsfav — Sun, 05 Dec 2021 01:11:49 +0000

React General Resources

React Community

React Online Playgrounds

Another Awesome Lists

https://bestofreactjs.com/

React Tutorials

React General Tutorials

React Hooks

React and TypeScript

React Performance

React Internals

React Interview Questions

React Tools

React Development Tools

react-devtools - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools
react-hot-loader - Tweak React components in real time
react-loadable - A higher order component for loading components with promises
loadable-components - React code splitting made easy
reactotron - A desktop app for inspecting your React and React Native projects
storybook - UI component dev & test
docz - Zero Config, live-reloading documentation with Markdown + JSX
react-styleguidist - Isolated React component development environment with a living style guide
react-cosmos - Dev tool for creating reusable React components
eslint-plugin-react - React specific linting rules for ESLint
eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements
@axe-core/react - Accessibility auditing for React applications
DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page
Why Did You Render - Monkey patches React to notify you about avoidable re-renders.
Divjoy - React codebase and UI generator to speed up development (paid)
Plasmic - Powerful design tool for building your React components visually.
jsx-ast-utils - AST utility module for statically analyzing JSX
react-scanner - Extract React components and props usage from code

React Starter Kits and Toolchains

create-react-app - Set up a modern Web app by running one command
Razzle - Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications
Neutrino React Preset - @neutrinojs/react is a Neutrino preset that supports building React web applications
react-starter-kit - Isomorphic Web app boilerplate
create-react-library - CLI for creating reusable, modern React libraries using Rollup and create-react-app.
tsdx - Zero-config CLI for TypeScript package development

React Frameworks

next.js - The React Framework
gatsby.js - Free and open source framework based on React
react-admin - Frontend Framework for building B2B applications on top of REST/GraphQL APIs
remix - Finally, a killer React framework from the creators of React Router
Blitz - The Fullstack React Framework
aleph.js - The React Framework in Deno

Awesome Vue.js Resources

reactjsfav — Sun, 05 Dec 2021 01:06:20 +0000

Official Resources

External Resources

Vue.js 資料まとめ(for japanese) by @hashrock
Vue.js Newsletter - Weekly dose of handpicked Vue.js news
Vue.js Wikipedia
Vue.js Radar - Curated newsletter + site covering new Vue.js releases/contributions.
Vue News - Social website focusing on the latest Vue.js news and information.
Vue Curated Resources - Recommended Vue.js courses and tutorials.
Vue School - Learn Vue.js from video courses by core members and industry experts
VueDose. Tips & tricks about the Vue ecosystem, for busy devs.
Vuelibs. A minimalistic list of Vue.js libraries and components based on the awesome-vue repo.
Vue.js DEV Community - Official tag for the Vue.js JavaScript Framework on DEV.to
Vue.js Online Courses Directory - Vue.js courses from top e-learning platforms curated by Classpert, a online course search engine.
WebTechSurvey.com - An extensive list of websites created with the Vue.js Javascript framework.
Vue Mastery - The ultimate learning resource for Vue developers
Vue 3 Video Playlist - Amazing Vue 3 tutorials and experiments
Vue.js Workshops - Learn Vue 2, in browser, by building 3 applications: Landing page, Todos App and Podcasts aggregator.( Vue.js, Vue-Router, Vuex, Vue-Axios, Vue-Apollo )
Vue.js Articles - Assorted Vue 2 and 3 tutorials and articles.
Best vue.js Courses On YouTube - Handpicked list of best Vue.js tutorials on YouTube

Job Portal

Vue.js Jobs - VueJobs - A Vue.js job portal to hire or get hired for all your Vue.js jobs.
Vue.js Interview Questions - A List of 300 VueJS Interview Questions and Answers
Prokarman Resume Builder - A Free Resume Builder for crafting resumes for your dream job.

Community

Conferences

Podcasts

Youtube Channels

Official Examples

✨Top Vuejs Charts Libraries

reactjsfav — Mon, 08 Nov 2021 10:11:34 +0000

apexcharts.js

A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards. ApexCharts is an MIT licensed open-source project that can be used in commercial and non-commercial projects.

https://github.com/apexcharts/apexcharts.js

Vue-ECharts

Apache ECharts component for Vue.js.

https://github.com/ecomfe/vue-echarts

vue-chartjs

vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.

https://github.com/apertureless/vue-chartjs

✨ ThreeJS + VueJS 3 + ViteJS ⚡

✨ ThreeJS
The most popular WebGL library, with a good support on both desktop and mobile.

🛠️ VueJS 3
With TroisJS you can easily create 3D content for your website using VueJS components.

⚡️ ViteJS / HMR
Really fast development time with ViteJS/HMR ! Useful to create awesome 3D scenes.

https://troisjs.github.io/

Source:https://bestofvue.com/

10+ React Rich Text Editors

reactjsfav — Sun, 07 Nov 2021 09:07:58 +0000

Slate - A completely customizable framework for building rich text editors.

Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity.

The editor's "schema" was hardcoded and hard to customize. Things like bold and italic were supported out of the box, but what about comments, or embeds, or even more domain-specific needs?
Transforming the documents programmatically was very convoluted. Writing as a user may have worked, but making programmatic changes, which is critical for building advanced behaviors, was needlessly complex.
Serializing to HTML, Markdown, etc. seemed like an afterthought. Simple things like transforming a document to HTML or Markdown involved writing lots of boilerplate code, for what seemed like very common use cases.
Re-inventing the view layer seemed inefficient and limiting. Most editors rolled their own views, instead of using existing technologies like React, so you have to learn a whole new system with new "gotchas".
Collaborative editing wasn't designed for in advance. Often the editor's internal representation of data made it impossible to use to for a realtime, collaborative editing use case without basically rewriting the editor.
The repositories were monolithic, not small and reusable. The code bases for many of the editors often didn't expose the internal tooling that could have been re-used by developers, leading to having to reinvent the wheel.
Building complex, nested documents was impossible. Many editors were designed around simplistic "flat" documents, making things like tables, embeds and captions difficult to reason about and sometimes impossible.

Demo GitHub

Draft.js - a React framework for building text editors.

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

Extensible and Customizable: We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media.
Declarative Rich Text: Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
*Immutable Editor State: * The Draft.js model is built with immutable-js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage. Demo GitHub

React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.

Configurable toolbar with option to add/remove controls.
Option to change the order of the controls in the toolbar.
Option to add custom controls to the toolbar.
Option to change styles and icons in the toolbar.
Option to show toolbar only when editor is focused.
Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
Support for block types: Paragraph, H1 - H6, Blockquote, Code.
Support for setting font-size and font-family.
Support for ordered / unordered lists and indenting.
Support for text-alignment.
Support for coloring text or background.
Support for adding / editing links
Choice of more than 150 emojis.
Support for mentions.
Support for hashtags.
Support for adding / uploading images.
Support for aligning images, setting height, width.
Support for Embedded links, flexibility to set height and width.
Option provided to remove added styling.
Option of undo and redo.
Configurable behavior for RTL and Spellcheck.
Support for placeholder.
Support for WAI-ARIA Support attributes
Using editor as controlled or un-controlled React component.
Support to convert Editor Content to HTML, JSON, Markdown.
Support to convert the HTML generated by the editor back to editor content.
Support for internationalization.

Demo GitHub

Quill Rich Text Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its extensible architecture and a expressive API you can completely customize it to fulfill your needs. Some built in features include:

Fast and lightweight
Semantic markup
Standardized HTML between browsers
Cross browser support including Chrome, Firefox, Safari, and IE 9+

Demo GitHub

React Email Editor

Drag-n-Drop Email Editor Component for React.js.The excellent drag-n-drop email editor by Unlayer as a React.js wrapper component. This is the most powerful and developer friendly visual email builder for your app.

editorId String HTML div id of the container where the editor will be embedded (optional)
style Object style object for the editor container (default {})
minHeight String minimum height to initialize the editor with (default 500px)
onLoad Function called when the editor instance is created
onReady Function called when the editor has finished loading
options Object options passed to the Unlayer editor instance (default {})
tools Object configuration for the built-in and custom tools (default {})
appearance Object configuration for appearance and theme (default {})
projectId Integer Unlayer project ID (optional)

Demo GitHub

Monaco Editor for React

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins .

Besides types, the library exports Editorand DiffEditor components, as well as the loader utility and the useMonaco hook:

import Editor, { DiffEditor, useMonaco, loader } from "@monaco-editor/react";

Demo GitHub

Alloy Editor

Alloy Editor is a modern WYSIWYG editor built on top of CKEditor, designed to create modern and gorgeous web content.

Smart toolbars appear right near the selected text and offer different functionality based on context
Easily add your own buttons (see the "marquee" example in the docs)
Paste images from clipboard, or Drag&Drop them from another application
Insert images from the device's camera!
Paste rich text from any web page and preserve its formatting
The full styling power of CKEditor...
...with a much more modern UI
The core is fully separated from the UI
The example UI is built with React
Plugin architecture

Demo GitHub

react-contenteditable

React component for a div with editable contents.



import React from 'react'
import ContentEditable from 'react-contenteditable'

class MyComponent extends React.Component {
  constructor() {
    super()
    this.contentEditable = React.createRef();
    this.state = {html: "<b>Hello <i>World</i></b>"};
  };

  handleChange = evt => {
    this.setState({html: evt.target.value});
  };

  render = () => {
    return <ContentEditable
              innerRef={this.contentEditable}
              html={this.state.html} // innerHTML of the editable div
              disabled={false}       // use true to disable editing
              onChange={this.handleChange} // handle innerHTML change
              tagName='article' // Use a custom HTML tag (uses a div by default)
            />
  };
};

Demo GitHub

Megadraft -A Rich Text editor

Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility.



import React from "react";
import ReactDOM from "react-dom";
import {MegadraftEditor, editorStateFromRaw} from "megadraft";

//Import megadraft.css
import 'megadraft/dist/css/megadraft.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: editorStateFromRaw(null)};
  }

  onChange = (editorState) => {
    this.setState({editorState});
  }

  render() {
    return (
      //Add some margin left to show plugins sidebar
      <div style={{marginLeft: 80}}>
        <MegadraftEditor
          editorState={this.state.editorState}
          onChange={this.onChange}
          placeholder='Add some text'/>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Demo GitHub

react-web-editor

The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor.

The React Web editor is a library that provides and hooks of components that can dynamically change ui.
It supports features like Resizing, Draggable, and Drag and Drop, You can also upload a image dynamically, and styling component's color and text.
The coordinates tag, which shows where the current components are located, and the guide line, which tells you if the current components are centralized, are built into the block-type components.
Ultimatly, You can make a editor page which can change web's UI dynamically.

Demo GitHub

Tiptap

A headless, framework-agnostic and extendable rich text editor, based on ProseMirror.

Demo GitHub

Source: bestofreactjs.com

✨Top React Charts Libraries [2021]

reactjsfav — Mon, 27 Sep 2021 08:36:59 +0000

Recharts

Recharts is a Redefined chart library built with React and D3.

The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:

Simply deploy with React components.
Native SVG support, lightweight depending only on some D3 submodules.
Declarative components, components of charts are purely presentational.

All the components of Recharts are clearly separated. The lineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.

visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

For more examples using visx, check out the gallery.

nivo

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Installation

In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:

yarn add @nivo/core @nivo/bar

Features

Highly customizable
Motion/transitions, powered by react-motion
Component playground
Exhaustive documentation
Isomorphic rendering
SVG charts
HTML charts
Canvas charts
server side rendering API
SVG patterns
Gradients
responsive charts

billboard.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.

The name "billboard" comes from the famous billboard chart which everybody knows.

Why we decided to start billboard.js?

Supported chart types

Download and Installation

Download dist files from the repo directly or install it via npm.

For development (Uncompressed)

You can download the uncompressed files for development

Latest

Specific version

react-vis

Demos | Docs

A COMPOSABLE VISUALIZATION SYSTEM

Overview

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.

Some notable features:

Simplicity. react-vis doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
Flexibility. react-vis provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
Integration with React. react-vis supports the React's lifecycle and doesn't create unnecessary nodes.

react-chartjs-2

React wrapper for Chart.js 2.0 and 3.0, the most popular charting library 📊

React wrapper for Chart.js

Examples

Live: reactchartjs.github.io/react-chartjs-2

See these examples for more information

More react resource❤️ A curated list of awesome React frameworks, libraries and Components.