Top 23 JavaScript react-component Projects

• material-ui

  140 74,492 10.0 JavaScript

  MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

  

  Project mention: How to Setup Next App, and MUI5 with Typescript | dev.to | 2022-01-16

  import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };

  Enter fullscreen mode Exit fullscreen mode

  step 7
  we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.
  

  import * as React from 'react';
  import Head from 'next/head';
  import { AppProps } from 'next/app';
  import { ThemeProvider } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  import { CacheProvider, EmotionCache } from '@emotion/react';
  import theme from '../styles/theme';
  import createEmotionCache from '../../src/lib/createEmotionCache';
  
  // Client-side cache, shared for the whole session of the user in the browser.
  const clientSideEmotionCache = createEmotionCache();
  
  interface MyAppProps extends AppProps {
    emotionCache?: EmotionCache;
  }
  
  const App = (props: MyAppProps) => {
    const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
    return (
      
        
          My page
          
        
        
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          
          
        
      
    );
  };
  
  export default App;
  
  

  Enter fullscreen mode Exit fullscreen mode

• react-virtualized

  15 23,107 2.8 JavaScript

  React components for efficiently rendering large lists and tabular data

  Project mention: The world of Awesome CSS Frameworks | dev.to | 2022-01-11

  react virtualized - 23K⭐

• SonarQube

  www.sonarqube.org

  sponsored

  Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  

• Enzyme

  17 19,799 6.0 JavaScript

  JavaScript Testing utilities for React

  

  Project mention: Enzyme is dead. Now what? | dev.to | 2021-12-20

  React 17 Release Candidate came out. Shortly after, an issue has been raised in Enzyme repository to add support for React 17. Immediately after, @layershifter has opened a PR adding an official enzyme-adapter-react-17.

• react-native-web

  26 19,644 8.0 JavaScript

  React Native Components and APIs for the Web

  Project mention: Building a web app + mobile app | reddit.com/r/reactnative | 2022-01-19

  You can write your mobile app with React Native at first and then convert it to web using https://github.com/necolas/react-native-web](react-native-web) which is used by Twitter for example. Native components can be specified in *.native.ts, *.android.ts or *.ios.js, and web components in *.web.ts. Most native APIs are available in react-native-web but you might want to customize them a bit depending on platform UX.

• semantic-ui-react

  22 12,604 4.9 JavaScript

  The official Semantic-UI-React integration

  

  Project mention: How To Create A Custom Edit Form In DevExtreme Datagrid Using Semantic UI React. | dev.to | 2021-12-01

  Semantic UI is a front-end development framework similar to bootstrap. It is designed for theming. It contains prebuilt semantic components that help create beautiful and responsive layouts using friendly HTML syntax. It integrates React, Angular Ember, etc. It uses gulp build tools to help your project preserve its theme changes. Gulp is a javascript tool that allows you to automate tasks like builds, minification, compilation, etc. You can read more about it here: https://react.semantic-ui.com/.

• rebass

  10 7,586 3.4 JavaScript

  :atom_symbol: React primitive UI components built with styled-system.

  

  Project mention: [Gatsby] - This was my first Gatsby project | reddit.com/r/reviewmycode | 2021-11-15

  There's absolutely nothing wrong with using CSS mixed with your components, but I would suggest (if you haven't already) looking into some alternatives, such as styled-components or Rebass. Not because one is "better" than the other, but it's something to add to your arsenal

• base web

  13 7,309 9.4 JavaScript

  A React Component library implementing the Base design language

  

  Project mention: Looking for a Material UI alternative | reddit.com/r/reactjs | 2022-01-11

  Base Web! By far the most underrated UI library, which is open sourced and maintained by Uber. Visually it’s unopinionated because it’s meant to be overridden, and has a nice API for overriding every aspect of it with a robust theming config.

• OPS

  github.com/nanovms

  sponsored

  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.

  

• react-native-keyboard-aware-scroll-view

  3 4,584 3.6 JavaScript

  A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

  

  Project mention: Help | KeyboardAwareScrollView pushes up custom header | reddit.com/r/reactnative | 2021-08-06

  Hi, I already created an issue on github But it's urgent. Do you guys know how to avoid overlap header & status bar? I tried to change android:windowSoftInputMode but it didn't work

• reactivesearch

  2 4,539 9.4 JavaScript

  Search UI components for React and Vue: powered by appbase.io / Elasticsearch

  

  Project mention: Top 5 React projects - December edition | dev.to | 2021-12-17

  🤩 Reactive Search- UI components for building data-driven search experiences.

• airframe-react

  1 3,667 0.0 JavaScript

  Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

  Project mention: Free React dashboard templates and themes | dev.to | 2021-05-06

  Live Demo / Download

• react-image-gallery

  2 2,986 7.4 JavaScript

  React carousel image gallery component with thumbnail support 🖼

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

  View on GitHub

• react-flexbox-grid

  0 2,869 1.4 JavaScript

  A set of React components implementing flexboxgrid with the power of CSS Modules.

• video-react

  1 2,245 1.8 JavaScript

  A web video player built for the HTML5 world using React library.

  

  Project mention: make an video autoplay | reddit.com/r/reactjs | 2021-09-02

  Hi! I am cloning a website and have included a component with a video using "video-react". However, i want the video to autoplay. I was looking at this github for help and looked at line 34 https://github.com/video-react/video-react/blob/master/src/components/Player.js

• advanced-react-patterns

  0 2,027 6.6 JavaScript

  This is the latest advanced react patterns workshop

• react-rainbow

  1 1,670 8.7 JavaScript

  🌈 React Rainbow Components. Build your web application in a snap.

  

  Project mention: 유명한 리액트 컴포넌트 라이브러리 모음 | dev.to | 2021-08-06

  View on GitHub

• react-feather

  2 1,606 0.0 JavaScript

  React component for Feather icons

  

  Project mention: Yet another generic startpage | reddit.com/r/startpages | 2022-01-16

  react-feather for the icons

• react-awesome-query-builder

  2 1,054 8.7 JavaScript

  User-friendly query builder for React

  Project mention: react-awesome-query-builder: User-friendly React component to build queries (filters). WDYT? | reddit.com/r/coolgithubprojects | 2021-10-27

• react-recipes

  1 806 6.6 JavaScript

  👩‍🍳 A list of React Hooks utility library containing popular customized hooks

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

  react-recipes - 👩‍🍳 A list of React Hooks utility library containing popular customized hooks

• react-facebook

  2 703 0.0 JavaScript

  Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post

  Project mention: How to add comments to your blog ? | dev.to | 2021-12-15

  Facebook Comments via the react-facebook package

• pivotal-ui-react

  0 638 1.8 JavaScript

  Pivotal's design system & component library

  

• react-foundation

  0 593 4.6 JavaScript

  Foundation as React components.

  

• cloudinary-react

  2 460 4.3 JavaScript

  React components that utilize Cloudinary functionality

  

  Project mention: Build an Ecommerce Store with Next.js, Auth0 and Cloudinary | dev.to | 2021-10-18

  Cloudinary React video transformations Image optimization cloudinary-react

• notus-react

  1 459 6.9 JavaScript

  Notus React: Free Tailwind CSS UI Kit and Admin

  

  Project mention: Top Free React Dashboards to Use for Your Next Project | dev.to | 2021-09-21

  Download / Live Demo

JavaScript react-components related posts

• Building a web app + mobile app
  1 project | reddit.com/r/reactnative | 19 Jan 2022
• How to Setup Next App, and MUI5 with Typescript
  2 projects | dev.to | 16 Jan 2022
• Can Flutter/Dart replace JavaScript and React? If no, then Why
  2 projects | reddit.com/r/FlutterDev | 12 Jan 2022
• .d.ts files vs .ts, can someone clear this up for me?
  1 project | reddit.com/r/typescript | 8 Jan 2022
• SSR pages fail to load on Vercel with Next.js/MUI
  1 project | reddit.com/r/nextjs | 8 Jan 2022
• itemTemplate issue in primereact versions
  1 project | reddit.com/r/reactjs | 5 Jan 2022
• How does Twitter Web App make it so that only a part of the feed is in the DOM? And what is the benefit?
  1 project | reddit.com/r/webdev | 24 Dec 2021

Index

Sponsored

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

Get the trending JavaScript projects
with our weekly report!
» Subscribe «