Top 16 TypeScript Code Design Projects
-
formik
Build forms in React, without the tears 😭
I was working on a legacy application, well it was using 6 month old packages witch is legacy in the frontend world.. having old packages is not a problem in it self, but the application that was basically a large dynamic form, and it had grown so much since its first inception that we where experiencing some problems with sluggish inputs due to using the otherwise excellent formik library. So, I decided to try out the react-final-form library, that has more fine grained control to optimize rendering. after some initial testing, it looked promising, so when i decided to replace formik I had import { Field } from 'formik' sprinkled throughout the various components..
-
react-hook-form
📋 React Hooks for forms validation (Web + React Native)
-
apollo-client
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server
for example using one of this helper functions in the "new InMemoryCache" instance: helper functions
-
effector-react
The state manager ☄️
-
Router5
Flexible and powerful universal routing solution
-
universal-router
A simple middleware-style router for isomorphic JavaScript web apps
-
React Figma
⚛️ A React renderer for Figma
-
react-inlinesvg
An SVG loader component for ReactJS
-
JSONForms
Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.
-
aesthetic
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
-
crisp-react
Boilerplate with React client and Express backend written in TypeScript. Offers performance and extended functionality. Comes with SSR and without need to learn a framework. Helps to avoid frequent React-Express integration pitfalls.
If run-time SSR is not needed then have a look at Crisp React. It offers optional build-time SSR (pre-rendering) for one single webpage - the landing page. The idea is to display this page sooner while freeing up the webserver from serving other (internal) SPA pages and letting the page transitions happen without network round-trips. The overall solution is simple without any additional opinionated frameworks added to it.
-
axios-react
🌐 HTTP client component for React based on Axios
-
paperclip
A hybrid approach to building UIs - design & code in parallel
-
reactponsive
Responsive components and Hooks ⚒ for your favorite framework ⚛️
-
react-3ducks
Simple state management solution for React
-
react-formawesome
React UI lib for validation forms
Index
What are some of the best open-source Code Design projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | formik | 26,046 |
2 | react-hook-form | 17,460 |
3 | apollo-client | 15,488 |
4 | effector-react | 2,975 |
5 | Router5 | 1,662 |
6 | universal-router | 1,521 |
7 | React Figma | 1,340 |
8 | react-inlinesvg | 936 |
9 | JSONForms | 509 |
10 | aesthetic | 173 |
11 | crisp-react | 76 |
12 | axios-react | 30 |
13 | paperclip | 29 |
14 | reactponsive | 8 |
15 | react-3ducks | 6 |
16 | react-formawesome | 4 |