JavaScript react-components

Open-source JavaScript projects categorized as react-components | Edit details

Top 23 JavaScript react-component Projects

  • material-ui

    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

    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

    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

    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

    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

    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

    :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

    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

    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

    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

    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

    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-flexbox-grid

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

  • video-react

    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

    This is the latest advanced react patterns workshop

  • react-rainbow

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

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

    View on GitHub

  • react-feather

    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

    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

    👩‍🍳 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

    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

    Pivotal's design system & component library

  • react-foundation

    Foundation as React components.

  • cloudinary-react

    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

    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

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-19.

JavaScript react-components related posts

Index

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

Project Stars
1 material-ui 74,492
2 react-virtualized 23,107
3 Enzyme 19,799
4 react-native-web 19,644
5 semantic-ui-react 12,604
6 rebass 7,586
7 base web 7,309
8 react-native-keyboard-aware-scroll-view 4,584
9 reactivesearch 4,539
10 airframe-react 3,667
11 react-image-gallery 2,986
12 react-flexbox-grid 2,869
13 video-react 2,245
14 advanced-react-patterns 2,027
15 react-rainbow 1,670
16 react-feather 1,606
17 react-awesome-query-builder 1,054
18 react-recipes 806
19 react-facebook 703
20 pivotal-ui-react 638
21 react-foundation 593
22 cloudinary-react 460
23 notus-react 459
Find remote jobs at our new job board 99remotejobs.com. There are 29 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