TypeScript React

Open-source TypeScript projects categorized as React

Top 23 TypeScript React Projects

  • freeCodeCamp

    freeCodeCamp.org's open-source codebase and curriculum. Learn to code for free.

    Project mention: The Overflow Offline Project – Stack Overflow Blog | news.ycombinator.com | 2022-10-20

    You can also run FreeCodeCamp locally https://github.com/freeCodeCamp/freeCodeCamp/blob/main/docs/...

    And I funded to work to run that on an Android phone https://play.google.com/store/apps/details?id=space.atrailin...

  • antd

    An enterprise-class UI design language and React UI library

    Project mention: Ant Design 5.0 released, drops LESS and IE11 support | reddit.com/r/webdev | 2022-11-22
  • Zigi

    Workflow assistant built for devs & their teams. Automate the mundane part of your day, with live actionable messages for your GitHub & Jira tasks.

  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

    Project mention: Getting Tailwind to Work with Elm Book | dev.to | 2022-11-28

    Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

  • superset

    Apache Superset is a Data Visualization and Data Exploration Platform

    Project mention: Can we take a moment to appreciate how much of dataengineering is open source? | reddit.com/r/dataengineering | 2022-11-23
  • Ionic Framework

    A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

    Project mention: Building a Native Mobile App with Next.js and Capacitor | dev.to | 2022-11-08

    I've worked years with Ionic to build awesome cross platform applications and it's one of the best choices if you want a really great looking mobile UI that adapts to iOS and Android specific styling.

  • Docusaurus

    Easy to maintain open source documentation websites.

    Project mention: How to build a docs site with Next.js and Contentlayer | dev.to | 2022-11-29

    Docusaurus is a popular framework for generating docs from Markdown/MDX files and it does a great job! However, perhaps you have already an existing Next.js website so don’t want to create another one from a whole new codebase or on another domain.

  • hyperterm

    A terminal built on web technologies

    Project mention: #gitPanic - Tools | dev.to | 2022-11-29

    Before I added a script to print out my current git branch after the directory in my terminal, my most commonly used git command was git branch. Terminal programs like Hyper will have features like this preconfigured. If you're just using Zsh or Bash, here's a script you can add to your terminal profile file:

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.

  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    Project mention: Really noob React question | reddit.com/r/react | 2022-11-28

    CSS is still going to be necessary, although we tend to deliver it via React these days. I'd check out Styled Components if you want an easy way to manage your CSS inside of React.

  • ant-design-pro

    👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!

    Project mention: Comparing React Component Libraries | dev.to | 2022-09-16

    Unlike Semantic UI, AntD supports internationalization (or i18n). It currently supports over 55 languages and provides support for RTL development. While AntD does seem to have a premium theme like Material UI, it doesn’t provide the numerous options that Material UI does.

  • react-hook-form

    📋 React Hooks for form state management and validation (Web + React Native)

    Project mention: How to Confidently Write Unit Tests using React Testing Library | dev.to | 2022-12-01

    Also, instead of managing the state and onChange handler yourself, you can use a very popular react-hook-form library.

  • taro

    开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

  • TanStack Query

    🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

    Project mention: Consuming a Rails API with a NextJs client | dev.to | 2022-11-28

    **React Query is the link between the Rails and NextJs **Working together with Axios (my code), it is a great option to consume the REST API (and GraphQL). You have the access to: isLoading, isError, data, error, and others. It is a very easy way to load data and rescue errors.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Project mention: How can I add to a third-party library union type? | reddit.com/r/typescript | 2022-12-02

    Source: I’ve tried all kinds of variations of this, and in one case contributed a change to open things up where it made sense.

  • slate

    A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)

    Project mention: Slate | Editor in 10min with Next.js and TS ✍️ | dev.to | 2022-10-17

    Link to Repo

  • MobX

    Simple, scalable state management.

    Project mention: Front-end Guide | dev.to | 2022-11-23

    MobX

  • SWR

    React Hooks for Data Fetching

    Project mention: 📚 RTK Query Tutorial (CRUD) | dev.to | 2022-11-29

    Maybe, some of you already heard about React Query or SWR. I believe those state management package have the same concept with the RTK Query. However, a winning point about RTK query is all in one with Redux. If you are using Redux, so it's a free optional feature without installing a new package.

  • react-spring

    ✌️ A spring physics based React animation library

    Project mention: 16 Libraries You Should Know as a React Developer 💯🔥 | dev.to | 2022-10-04

    9. react-spring

  • react-native-elements

    Cross-Platform React Native UI Toolkit

    Project mention: React Native Top UI Components Libraries | dev.to | 2022-07-28

    Github Documentation Stars ⭐ +22.6k

  • docz

    ✍ It has never been so easy to document your things!

    Project mention: Why aren't Node.js package managers interoperable? | dev.to | 2022-10-07

    This is a real concern. I've worked on some Yarn projects where I sometimes forget and accidentally run npm. Although these package managers (I'll call them PMs for short) are interoperable to some degree, there are important differences between these tools, so you should know what you're getting into. Even in seemingly simple projects, results can vary. Here are two reports of things working with one PM, but not another. Moreso, running install once is very different from continuous concurrent use, where you're adding and removing packages and more.

  • appsmith

    Low code project to build admin panels, internal tools, and dashboards. Integrates with 15+ databases and any API.

    Project mention: Best way to do custom input widget? | reddit.com/r/appsmith | 2022-11-17

    Yes, we have a guide on creating custom widgets here: https://github.com/appsmithorg/appsmith/blob/release/contributions/AppsmithWidgetDevelopmentGuide.md

  • react-redux

    Official React bindings for Redux

    Project mention: Consuming a Rails API with a NextJs client | dev.to | 2022-11-28

    tl;dr; Previously here, I wrote about how to write a modern web application using Rails as a full-stack framework. Just writing HTML and Vanilla Javascript. Now we will go ahead creating a React client App using NextJs. The existing API has the following endpoints: GET /api/kit/products(.:format) POST /api/kit/products(.:format) GET /api/kit/products/:id(.:format) PATCH /api/kit/products/:id(.:format) PUT /api/kit/products/:id(.:format) DELETE /api/kit/products/:id(.:format) Enter fullscreen mode Exit fullscreen mode In the new project, we have the same screen as before: We have a lot of customized components: src/components/ ├── Form │ ├── Actions.tsx │ ├── Input.tsx │ └── index.tsx ├── Layout │ ├── Page.tsx │ ├── Sidebar.tsx │ └── index.tsx ├── Loading.tsx ├── LoadingOverlay.tsx ├── Notification.tsx ├── Products │ ├── Form.tsx │ └── Sidebar.tsx └── SearchList ├── Form.tsx ├── ListItem.tsx └── index.tsx Enter fullscreen mode Exit fullscreen mode But our pages are simple and short. For example, take a look at the products page code: Highlights **NextJs is just a choice, not a requirement **The API made using Ruby on Rails is completely independent of the Next JS client application developed with NextJs. You could use any RESTfull client application to consume the existing API. In my project, I am using the NextJs project as a subfolder of my Rails repository, but you could put it anywhere. Why Next JS **I already worked with React Router and React Navigation, but when I knew the **Next/Router and all related features, as the **Next/Link**, I loved it. We can use partial load and caches. Get more info here. **Conventions **You can create your own convention for your own projects. But, in my opinion, it is beneficial to use a convention that is popular and validated in production by many other developers. Like Ruby on Rails, NextJs gives you a directory structure, core resources (link, routes, image, etc.) and rich documentation. **SSR **After to create a few projects using SPA, it doesn’t seem to me a good choice for big projects. So, for now, I am using SSR with NextJs. The main use of SSR is to improve the SEO, but like this approach to offer the a better UX. **React Query is the link between the Rails and NextJs **Working together with Axios (my code), it is a great option to consume the REST API (and GraphQL). You have the access to: isLoading, isError, data, error, and others. It is a very easy way to load data and rescue errors. **React Context **I don’t like https://react-redux.js.org/, it brings a complexity to the project that I don’t think soo is a good thing. But we can use the React Context and React Reducer to offer a store and events to manager states of the application. You can see the it on the project here https://github.com/raphox/rails-7-fullstack/tree/nextjs/frontend/src/contexts/products. *React components with namespace **It is something that I learned recently. I used it in my project to offer a way to override children of some components and prevent to set many properties throth the parent. Like in the following code: In the previous code, we have the namespace *SidebarPrimitive with nested Root, Header, and List components. I am using the Root component to wrap the content and I am passing the props to the respected child. **Tailwind **There are controversies related to it, but trust me, create a project using it and make sure that you don’t like or love it. Dependencies: https://tailwindcss.com/ “Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.” https://www.radix-ui.com/docs/primitives/utilities/slot “Merges its props onto its immediate child.” https://tanstack.com/query/ “Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte” https://axios-http.com/ “Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.” https://github.com/lukeed/clsx “A tiny (228B) utility for constructing className strings conditionally.” https://lodash.com/ “A modern JavaScript utility library delivering modularity, performance & extras.” https://react-hook-form.com/ “Performant, flexible and extensible forms with easy-to-use validation” https://github.com/jquense/yup “Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both.” The project rails-7-fullstack/frontend at nextjs · raphox/rails-7-fullstack External references: https://www.typescriptlang.org/ https://www.radix-ui.com https://reactjs.org/docs/context.html https://medium.com/@kunukn_95852/react-components-with-namespace-f3d169feaf91

  • react-navigation

    Routing and navigation for your React Native apps

    Project mention: Consuming a Rails API with a NextJs client | dev.to | 2022-11-28

    Why Next JS **I already worked with React Router and React Navigation, but when I knew the **Next/Router

  • NativeScript

    ⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❤️ Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.

    Project mention: Nativescript & Formily: A match made in heaven. | dev.to | 2022-10-21

    Using the amazing Preview environment that the Nativescript team together with Stackblitz have done, it was time to start hacking at it. (More information can be found here at https://preview.nativescript.org/)

  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

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-12-02.

TypeScript React related posts

Index

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

Project Stars
1 freeCodeCamp 357,648
2 antd 83,134
3 storybook 75,303
4 superset 49,487
5 Ionic Framework 48,319
6 Docusaurus 40,074
7 hyperterm 39,775
8 styled-components 37,831
9 ant-design-pro 33,269
10 react-hook-form 31,998
11 taro 31,983
12 TanStack Query 31,386
13 chakra-ui 29,944
14 slate 25,956
15 MobX 25,899
16 SWR 24,751
17 react-spring 24,534
18 react-native-elements 23,056
19 docz 23,009
20 appsmith 22,993
21 react-redux 22,477
22 react-navigation 21,874
23 NativeScript 21,842
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com