25 Best React Miscellaneous Component Libraries And Frameworks
1.React components for Cesium
React components for 🌏Cesium
Declarative Cesium 🌏: high maintainable Cesium app with React
Blazing Fast Development 👨: HMR works perfectly
Strongly Typed 💪: TypeScript is fully supported
Demo: https://resium.darwineducation.com
2.React Cola
WebCola for React.
3.Path Algorithms Visualizer
Intuitive approach to path visualization algorithms using React!
4. React Well Plates
Render well plates for chemistry and biology in react
Demo: https://zakodium.github.io/react-well-plates/
5.React regl
React Fiber Reconciler Renderer for Regl WebGL http://kevzettler.com/react-regl/
Demos
View demos in the Storybook
There is a React Storybook included in the /docs directory with usage examples. The source for the Storybook is in /stories directory and demonstrates how to create the examples.
6.React Plaid Link
A simple React component for easy integration with the Plaid Link drop-in module
7.Sucker
Editor for Squid proxy configuration files based on default squid.conf.
Features
- Search over tags
- Import existing configuration
- Switch between Squid versions
8.undo/redo functionality with React Hooks.
React Hooks to implement Undo and Redo functionality.
Demo: https://codesandbox.io/s/5v9yoz7xn4
9.React Regl
React Fiber renderer and component container for Regl https://psychobolt.github.io/react-regl
10.React Stripe pos
React bindings for Stripe WebPOS SDK.
11.React minimal starter kit
A minimal tool chain for creating React applications without all the noise.
I’ve seen a lot of bootstrap or minimal React setups for developers. But they all seem kinda bloated. Even create-react-app is bloated as soon as you eject.
All I wanted is the minimal setup with:
- React
- Babel
- webpack
No server side rendering, configuration frameworks, routers, stores or other libraries.
It’ll just get you started. Everything else is up to you.
12.Cra universal
Create React App companion for universal app. No eject, zero config with customization, supports string and node stream API.
Features
- No eject needed!
- Zero config by default and customizable
- Server-side rendering for your SEO
- Code-splitting that works universally
- The core middleware is fully unit-tested
- Works alongside react-scripts, not as replacement
13.React keybinding Component
A top-level declarative React keybinding component, usable with ES6, no mixin or weird stuff.
react-keybinding-component is a component that will help you set up keybindings in your app. For the moment, only simple key events are supported (one key only, keyup, keydown). It’s just a less dirty way of using key events instead of having care of them with componentDidMount() in multiple components.
14.React Rewards
This package was built using React-Pose, react-dom-confetti and Lottie-web.
Why should I use that? Read my blog post and you will know – https://www.thedevelobear.com/post/microinteractions/
Install from npm by typing npm install react-rewards or yarn add react-rewards while in your package.json directory.
This package lets you add microinteractions to your app, and rewards users with the rain of confettis, flying emoji or memphis design particles in seconds. In order to make it rain, you need to wrap your button of choice with the Reward component, fire the rewardMe() method from the refs and voilà. You can also “punish” the user by calling the punishMe() method and showing them that something went wrong.
Demo available here!
15.React msa viewer
react-msa-viewer is a performant, extendable, highly-customizable, production-ready React Component that renders a Multiple Sequence Alignment (MSA).
WARNING: Work in progress - use with caution
Checkout the storybook at https://msa.bio.sh
16.React Web3
Ensure web3 is available before your app loads.
This package is compatible with both web3@0.2.x and web3@1.x.x
react-web3 exports a React component which wraps your app and ensures it doesn’t render until web3 is available. It also renders a nice message to the user to guide them in the following cases:
The user is not using a web3-capable browser, or
The user has web3 support, but their account is locked (their ETH address is inaccessible)
Along with the above, also:
Reacts to the user unlocking their wallet or switching accounts.
- Provides a context to your entire app with useful data.
- Accepts a callback that is called when user switches to a different account.
17.React A11y
Warns about potential accessibility issues with your React elements.
18.Fluxible
A pluggable container for universal flux applications. http://fluxible.io
Fluxible
This repository is the home of Fluxible and related libraries.
For support, join our gitter.im channel.
19.React pixi
This library works with React 15. If you are using React 16, look at react-pixi-fiber or a different library also called react-pixi.
Create/control a Pixi.js canvas using React.
To control a 3D scene with React, see react-three
20.Ziggeo’s React component v2
Ziggeo’s react component for easy react application deployment.
21.React qr reader
A React component for reading QR codes from the webcam. It uses the WebRTC standards for reading webcam data and jsQR is used for detecting QR codes in that data. To optimise the speed and experience, a web-worker is used to offload the heavy QR code algorithm on a separate process. The web worker is inlined and loaded on creation of the component.
Demo
https://jodusnodus.github.io/react-qr-reader
22.React Twitter Embed Component
Simplest way to add twitter widgets to your react project.
Demo and Examples
https://saurabhnemade.github.io/react-twitter-embed/
23.Redux Epics Decorator
Dumb decorators for redux & redux-observable & react-redux & redux-actions.
Features
🚀 Less boilerplate codes
🦄 No magic string Action Types
💚 Type Safe, typecheck in Payload
⛏ Go to definition, go to your Reducer/Epics with one click
🖇 Easy to intergrate into existed redux-observable or other redux middlewares
24.React Cursor Position
react-cursor-position is a primitive component for composing UI features that require notification of cursor or touch position changes. Position coordinates are plotted relative to the HTML element rendered by react-cursor-position. react-cursor-position re-renders child components with new position props when the cursor or touch position changes.
- May be activated by Press, Tap, Touch, Hover and Click gestures
- Supports scroll position changes during an active session
Demo
See the react-cursor-position demo site.
Experiment with react-cursor-position live on CodePen.
25.React server example tsx
Boilerplate for isomorphic web app with React server-side rendering in TypeScript https://react-tsx.now.sh
A complex example of how to do server-side rendering with React and TypeScript so that component code can be shared between server and browser (also known as isomorphic javascript).
Server-Side Rendering (SSR) leads to fast initial page loads, search-engine-friendly pages, and of course…its all type safe!
#reactjs #javascript
