SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 TypeScript React Projects
-
-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
ChatGPT-Next-Web
A cross-platform ChatGPT/Gemini UI (Web / PWA / Linux / Win / MacOS). 一键拥有你自己的跨平台 ChatGPT/Gemini 应用。
-
-
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
-
-
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
TanStack Query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
-
-
taro
开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
-
novu
GitOps based Notification Infrastructure as Code. Embeddable Notification Center, E-mail, Push and Slack Integrations.
-
-
appsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
-
-
expo
An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
-
slate
A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)
-
jsoncrack.com
✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.
-
Mattermost
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
The first tool we’ll look at is Pigment CSS, a zero-runtime CSS-in-JS library built to extract the co-located styles into separate CSS files during the build phase and eliminate the need for runtime style processing.
Project mention: Open Source Admin Dashboard Starter: Ant Design v5, TypeScript, MongoDB | dev.to | 2024-05-15Built with Ant Design 4 and ProComponents
But here’s some good news: there’s already a solution in the JavaScript world called Storybook!
Project mention: Tips from open-source: Set a maximum time limit on fetch using Promise.race() | dev.to | 2024-05-07// source: https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/blob/3513c6801e0fd771ccb5784dcaefcac6d50245e4/scripts/fetch-prompts.mjs#L26 async function main() { Promise.all(\[fetchCN(), fetchEN()\]) .then((\[cn, en\]) => { fs.writeFile(FILE, JSON.stringify({ cn, en })); }) .catch((e) => { console.error("\[Fetch\] failed to fetch prompts"); fs.writeFile(FILE, JSON.stringify({ cn: \[\], en: \[\] })); }) .finally(() => { console.log("\[Fetch\] saved to " + FILE); }); } main();
Project mention: Show HN: Open-source BI and analytics for engineers | news.ycombinator.com | 2024-05-15We are looking at moving our Power BI stuff to Apache Superset [1]. How does this compare to Superset?
[1] https://superset.apache.org/
shadcn-svelte is an unofficial Svelte port of shadcn/ui. It's a collection of reusable components that you can copy and paste or use the CLI to add to your Svelte apps. There is no package, no dependencies. You just choose the components you need and customize them to your needs. You can use shadcn-svelte as a reference to build your own component libraries.
Docusaurus is a popular open-source documentation tool primarily designed for product documentation and other technical documentation needs. It was first released in 2017 by Facebook Open Source (now Meta Open Source). Just recently, Docsaurus version 3.0 was released.
I was recently able to sit down with some of the core members of Ionic, who also created Stencil a toolchain for building Design Systems and Progressive Web Apps. We talked at great length how typically companies are approaching Ionic from a Design Team and need help building components. As a developer I wanted to talk about the Web Components that are used within the Design System first. There was a decent amount of surprise, so I thought I would break down what a Design System is and why it doesn't matter which end you start with, as long as you have both your Design and Development teams working together to build your Design System.
For large-scale applications with frequently changing state, dedicated state management libraries like Redux, MobX, Zustand, etc. are generally better choices. These libraries offer efficient ways to handle state updates and minimize unnecessary re-renders.
I am using iTerm2 on my macOS. Other available options are Hyper and VS Code’s inbuilt terminal, which I sometimes use for quick tests. You can open a terminal in VS Code by using the keyboard shortcut CMD + J or CTRL + J on Windows, or View → Terminal.
When styled-components hit the CSS scene, it caught many developers' eyes with its core concept: component-level styling. With this approach, your styles are defined directly within your React components using template literals and tagged functions. It’s a straightforward technique that keeps styles tightly coupled with their corresponding components, making your code easier to find, understand, and modify.
Project mention: Tremor – The React library to build dashboards fast | news.ycombinator.com | 2023-07-28As per refine.dev blog, these are some alternatives to Tremor:
* Ant design pro (https://github.com/ant-design/ant-design-pro/)
import { Body, Column, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text, Row, } from "@react-email/components"; import * as React from "react"; const EmailTemplate = () => ( Hello WorldPreview> Hello WorldHeading> Column> Row> Section> Hey Emil,Text> CoolText> Section> Container> You're receiving this email because your subscribed to Newsletter App Text>
Newsletter Appstrong>, ©{" "} NovuLink> Text> Section> Body> Html> ); export default EmailTemplate; const main = { backgroundColor: "#f3f3f5", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const headerContent = { padding: "20px 30px 15px" }; const headerContentTitle = { color: "#fff", fontSize: "27px", fontWeight: "bold", lineHeight: "27px", }; const paragraph = { fontSize: "15px", lineHeight: "21px", color: "#3c3f44", }; const divider = { margin: "30px 0", }; const container = { width: "680px", maxWidth: "100%", margin: "0 auto", backgroundColor: "#ffffff", }; const footer = { width: "680px", maxWidth: "100%", margin: "32px auto 0 auto", padding: "0 30px", }; const content = { padding: "30px 30px 40px 30px", }; const header = { borderRadius: "5px 5px 0 0", display: "flex", flexDireciont: "column", backgroundColor: "#2b2d6e", }; const footerDivider = { ...divider, borderColor: "#d6d8db", }; const footerText = { fontSize: "12px", lineHeight: "15px", color: "#9199a1", margin: "0", }; const footerLink = { display: "inline-block", color: "#9199a1", textDecoration: "underline", fontSize: "12px", marginRight: "10px", marginBottom: "0", marginTop: "8px", }; const footerAddress = { margin: "4px 0", fontSize: "12px", lineHeight: "15px", color: "#9199a1", };
RESTful API: RESTful API does not have machine-readable metadata cacheable, and query validation is not available.(There are some libraraies tried to solve this issue like TRPC)
Project mention: A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev | dev.to | 2024-02-05appsmith — Low code project to build admin panels, internal tools, and dashboards. Integrates with 15+ databases and any API.
Link: https://swr.vercel.app/
Project mention: JSONCrack Codebase Analysis - Part 5 - Toolbar and Bottom bar | dev.to | 2024-01-09They are used in Editor component. Part 4 explains about Editor component.
Personally, I rather liked self-hosted versions of these:
Mattermost: https://mattermost.com/
Rocket.Chat: https://www.rocket.chat/
Nextcloud Talk: https://nextcloud.com/talk/
Out of those, Mattermost was the easiest to setup (just need PostgreSQL and a web server, in addition to the main container), however not being able to easily permanently delete instead of just archiving workspaces was awkward. Nextcloud Talk was very easy to get going if you already have Nextcloud but felt a bit barebones last I checked, whereas Rocket.Chat was overall the more pleasant option to use, although I wasn't the biggest fan of them using MongoDB for storage.
The user experience is pretty good with all of them, however in the groups that I've been a part of, ultimately nobody cared about self-hosting an instance, since most orgs just prefer Teams/Slack (or even Skype for just chatting/meetings) and most informal groups just default to Discord. Oh well.
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).
TypeScript React related posts
-
Many Searchers Want to Turn Off Google AI Overviews
-
React Router has merged with Remix, should you use a different router?
-
6 CSS tools for more efficient and flexible CSS handling
-
I wrote a new blog using Next.js App router
-
Merging Remix and React Router
-
Leveraging React Server Components in RedwoodJS
-
How To Build Your Own Newsletter App? p.1
-
A note from our sponsor - SaaSHub
www.saashub.com | 17 May 2024
Index
What are some of the best open-source React projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | freeCodeCamp | 389,999 |
| 2 | Material UI | 91,834 |
| 3 | antd | 90,375 |
| 4 | storybook | 82,997 |
| 5 | ChatGPT-Next-Web | 69,066 |
| 6 | superset | 59,071 |
| 7 | shadcn/ui | 58,619 |
| 8 | Docusaurus | 53,209 |
| 9 | Ionic Framework | 50,475 |
| 10 | zustand | 43,112 |
| 11 | hyperterm | 42,718 |
| 12 | styled-components | 40,111 |
| 13 | TanStack Query | 39,996 |
| 14 | ant-design-pro | 35,871 |
| 15 | taro | 34,813 |
| 16 | novu | 33,044 |
| 17 | trpc | 32,842 |
| 18 | appsmith | 31,783 |
| 19 | SWR | 29,562 |
| 20 | expo | 29,553 |
| 21 | slate | 29,059 |
| 22 | jsoncrack.com | 28,619 |
| 23 | Mattermost | 28,177 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com