JavaScript Component

Open-source JavaScript projects categorized as Component | Edit details

Top 23 JavaScript Component Projects

  • Dragula

    :ok_hand: Drag and drop so simple it hurts

    Project mention: Show HN: Drovp – Convenient UI for any drag and drop operations | news.ycombinator.com | 2021-12-27

    I used Dragula[^1] for a form builder in the past and had quit a pleasent experience. Though I don't know how it would hold with a drag centric (card game) UI

    [1]: https://bevacqua.github.io/dragula/

  • Vue.Draggable

    Vue drag-and-drop component based on Sortable.js

    Project mention: How can I move "questions" to another topic with Vuejs 3 and vuedraggable? | reddit.com/r/vuejs | 2022-01-01

    Check out this example https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/two-lists.vue

  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • why-did-you-render

    why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)

    Project mention: Help with a project | reddit.com/r/reactjs | 2022-01-22

    Hmm, ok, now I saw that you said that performance is bad not even just during the state update, but at all times. I would suspect something is triggering intense rerendering. You could try run Lighthouse as it monitors your page for some time and then gives you a breakdown of what functions where being called and how many times. This may lead you to what is causing the perf issues. There’s also this library Why Did You Render, it could help you.

  • vue-multiselect

    Universal select/multiselect/tagging component for Vue.js

    Project mention: Here's my experience migrating my app from Vue 2 to Vue 3 | reddit.com/r/vuejs | 2021-09-26

    Besides the above, I removed all my dependencies and installed their Vue counterparts. Some of them do not yet have a stable build so, I installed the Next branch builds. So, if you do not find a Vue 3 compatible version, check the Github pull requests - usually there is one and most of the time the branch is named "Next". You can do something like https://github.com/shentao/vue-multiselect/tree/next

  • google-map-react

    Google map library for react that allows rendering components as markers :tada:

    Project mention: Easiest Way to Implement Heatmaps in your React applications | dev.to | 2021-12-26

    To get more info about this package, visit -->

  • miniprogram-demo

    微信小程序组件 / API / 云开发示例

    Project mention: Mini programs on larger apps like wechat. Can you do it with react native ? | reddit.com/r/reactnative | 2021-04-27

    However, there's a demo on their GitHub, they do use npm and a lot of JavaScripts. https://github.com/wechat-miniprogram/miniprogram-demo

  • react-datasheet

    Excel-like data grid (table) component for React

    Project mention: Overview of Commercial and Open-Source UI Components for React | dev.to | 2021-07-01

    React-datasheet is a highly customizable React UI component that serves for generating Excel-like spreadsheets on a web page. It allows performing basic cell operations (select, cut, copy, paste) and using keyboard navigation by default. You can add more advanced capabilities, extra cell attributes, your own editors, or new behaviors with the help of custom renderers. It is important to mention that React-datasheet does not support math calculations and validation. For this purpose, you’ll have to integrate some math libraries (such as mathjs). Useful resources: GitHub repository Package size: 116 kB License: MIT

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • emoji-mart

    One component to pick them all 👊🏼

    Project mention: Adding Personality to a Boring Form in my Saas Project | dev.to | 2022-01-08

    I explored some React emoji pickers online so I wouldn't have to build it myself, and eventually found Emoji Mart.

  • create-react-library

    ⚡CLI for creating reusable react libraries.

    Project mention: How are you bundling a React Component Library? | reddit.com/r/reactjs | 2021-12-12

    At first i thought that this was THE solution but looking deeper at the source code, this tool is a wrapper around a wrapper around a wrapper.... Don't get me wrong, it probably works, but it's currently using a rollup configuration that was created in 2018, the package itself has not seen any updates in 17 months and has 106 open issues. Also the owner says himself that he's not able to work that much on it anymore and suggest to use TSDX which in return hasn't been updated in several months, many open issues and extensive customization is recommended with patch-package which already in itself is a red-flag :(

  • react-burger-menu

    :hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

    Project mention: Awesome Things Related To React Hooks 😍 | dev.to | 2021-09-23

    React Burger Menu - An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.

  • react-swipeable-views

    A React component for swipeable views. :snowflake:

  • react-infinite-calendar

    ✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.

  • rome

    :calendar: Customizable date (and time) picker. Opt-in UI, no jQuery!

  • vue-content-loader

    SVG component to create placeholder loading, like Facebook cards loading.

    Project mention: 18 amazing 🤩 GitHub repositories that will help you 🪄 make a beautiful project | dev.to | 2021-09-03

    Create your own loading: use the online tool to create your custom loader easily.

  • vue-easytable

    🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...

    Project mention: Useful VueJS Datatables | reddit.com/r/vuejs | 2022-01-20

    Vue-Easytable

  • react-native-modals

    A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

    Project mention: Buggy Performance Using Modals On Android. How To Fix? | reddit.com/r/reactnative | 2021-12-20
  • xmpp.js

    XMPP for JavaScript

    Project mention: [AskJS] async iterators to replace EventEmitter, EventTarget and so on | reddit.com/r/javascript | 2021-02-25

    I'm the author of xmpp.js and aria2.js.

  • zoid

    Cross domain components

    Project mention: Build embeddable React widget from Nextjs | reddit.com/r/nextjs | 2021-11-21
  • autoresponsive-react

    Auto Responsive Layout Library For React

  • vue-drag-resize

    Vue2 && Vue3 Component for resize and drag elements

    Project mention: Best way of making a web PDF template creator | reddit.com/r/CodingHelp | 2021-10-27

    I've thought about using view with this framework, but I don't know if it is a good match with my objective (example of what is does here).

  • react-frame-component

    Render your React app to an iFrame

    Project mention: Rendering in an iframe in a React app | dev.to | 2021-06-03

    Though you may now know how to render within an iframe by writing an IFrame wrapper from scratch, there is already a library that does this for you and has more features & use-cases built in called react-frame-component.

  • react-native-credit-card-input

    Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

    Project mention: React Native Credit Card Input – Easy, cross-platform credit-card input for your React Native Project 💳 💳 | reddit.com/r/reactnative | 2021-02-23

    It helps if you share a link to the repo. I think it is this one https://github.com/sbycrosz/react-native-credit-card-input

  • orbit-components

    React components of open-source Orbit design system by Kiwi.com (by kiwicom)

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-01-22.

JavaScript Component related posts

Index

What are some of the best open-source Component projects in JavaScript? This list will help you:

Project Stars
1 Dragula 21,050
2 Vue.Draggable 16,722
3 why-did-you-render 7,886
4 vue-multiselect 6,022
5 google-map-react 5,558
6 miniprogram-demo 5,129
7 react-datasheet 4,890
8 emoji-mart 4,738
9 create-react-library 4,590
10 react-burger-menu 4,579
11 react-swipeable-views 4,111
12 react-infinite-calendar 3,830
13 rome 2,905
14 vue-content-loader 2,805
15 vue-easytable 2,548
16 react-native-modals 2,028
17 xmpp.js 2,018
18 zoid 1,682
19 autoresponsive-react 1,482
20 vue-drag-resize 1,387
21 react-frame-component 1,373
22 react-native-credit-card-input 1,326
23 orbit-components 1,146
Find remote jobs at our new job board 99remotejobs.com. There are 30 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Less time debugging, more time building
Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
scoutapm.com