What is the GitHub React Primer, and how to use it with nextjs?

Primer + Nextjs

What is the GitHub React Primer, and how to use it with nextjs?

Github primer is a UI library built on reactjs; it helps design and build websites fast.

I used MUI, react-bootstrap, Chakra UI, and Ant Design UI library as a developer to build a react application.

All the library is complicated and provides fewer features than Primer reacts UI. For example, the MUI library is the worst library to build a website. It is too complex for beginners and advanced developers. As developers, we must develop a simplified UI library for the community.

What is the GitHub React Primer?

React Primer is a UI library like react-bootstrap and Chakra UI. GitHub designs the react Primer. The GitHub primer is easy to use for developers. It provides a lot of in-built components; you do not need any else.

The primer UI has many themes, such as dark mode, light mode, Light high contrast, Dark high contrast, etc.

To toggle between different themes, react Primer provides a hook to apply different themes on the site.

The most critical React primer comes with design guidelines provided by the GitHub team.

All the codes are available on GitHub, and check out the ruining demo with code sandbox.

How to use React primer with nextjs?

The installation of React primer is easy, and it is similar to other UI libraries.

Step

1. Create the nextjs project
2. Install the packages
3. Wrapper with ThemeProvider
4. Test your code
5. How to set up the ESLint for the primer plugin in nextjs?

Create the nextjs project.

The first step is to create a nextjs project with the following command.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Install the packages

If you already created the project with the help of ClI, then skip is part and follow the second step to install the Primer react package and styled-components package to use Primer react.

yarn add @primer/react styled-components

# or

pnpm add @primer/react styled-components

If you use the SVG icon, I recommend installing one additional package, react-icons.

yarn add react-icons

# or

pnpm add react-icons

Wrapper with ThemeProvider

ThemeProvide is a component wrapper introduced by @primer/react UI. It helps to add the theme configuration to the root of your application.

import '@/styles/globals.css'
import {ThemeProvider} from '@primer/react'

export default function App({ Component, pageProps }) {

  return <ThemeProvider colorMode="auto" preventSSRMismatch>
      <Component {...pageProps} />
  </ThemeProvider>

}

My global.css file looks like.

/* globals.css */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  overflow-x: hidden;
}

Test your code

Now Test your @primer/react UI with nextjs; for that, you need to use the following code.

// index.js
import { Header, Box, IconButton, ActionMenu, StyledOcticon, ActionList } from '@primer/react'
import { GoMarkGithub, GoPencil, GoArchive, GoTrashcan, GoKebabHorizontal } from "react-icons/go";


export default function Navbar() {

    return (
        <>
            <Header sx={{
                justifyContent:'center'
            }}>

                <Header.Item>
                    
                    <Header.Link href="#" fontSize={2}>

                        <StyledOcticon icon={GoMarkGithub} size={32} sx={{ mr: 2 }} />

                        <span>GitHub</span>

                    </Header.Link>

                </Header.Item>

                <Box display={`flex`} justifyContent={"center"} width={1224}>
                      
                    <Header.Item>Home</Header.Item>
                      
                    <Header.Item>About</Header.Item>
                      
                    <Header.Item>Contact</Header.Item>
                      
                </Box>
                      
                <Header.Item mr={0}>

                    <ActionMenu>

                        <ActionMenu.Anchor bg={`white`}>
                            <IconButton icon={GoKebabHorizontal} variant="invisible" aria-label="Open column options" />
                        </ActionMenu.Anchor>

                        <ActionMenu.Overlay>
                            <ActionList>
                                <ActionList.Item>
                                    <ActionList.LeadingVisual>
                                        <GoPencil />
                                    </ActionList.LeadingVisual>
                                    Rename
                                </ActionList.Item>
                                <ActionList.Item>
                                    <ActionList.LeadingVisual>
                                        <GoArchive />
                                    </ActionList.LeadingVisual>
                                    Archive all cards
                                </ActionList.Item>
                                <ActionList.Item variant="danger">
                                    <ActionList.LeadingVisual>
                                        <GoTrashcan />
                                    </ActionList.LeadingVisual>
                                    Delete
                                </ActionList.Item>
                            </ActionList>
                        </ActionMenu.Overlay>
                    </ActionMenu>
                </Header.Item>

            </Header>

        </>
    )
}

I used Header, Box, ActionMenu, and ActionList components for the demo. The useTheme hook help changes or toggle the theme from dark to light.

The output of the Navbar component looks like this.

Navbar

How to set up the ESLint for the primer plugin in nextjs?

The Primer React team offers an ESLint plugin to enable developers to use best practices and fix common problems.

yarn add --dev eslint-plugin-primer-react

# OR

PNPM add --dev eslint-plugin-primer-react

Configuring the eslint .eslintrc.jsonfile in nextjs.

// .eslintrc.json
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:primer-react/recommended"

  ]
}

Conclusion

Primer reactjs UI is a good fit as compared to other UI libraries. Primer reactjs are easy to use and configurable as compared to Other UI.

I’m always recommended that Primer React is always a good fit for an extensive application. Primer React increases the bundle size and uses it carefully with dynamic import.

Prime react UI provides a PageLayout component that helps create the website’s layout very easily.

Every inbuilt component supports all themes, and you do not need to add any extra configuration.

The GitHub primer reactjs UI library provides complete control in the developer’s hands. Another library does not offer that; it combines the typescript and react Primer. Then It is a lifesaver UI library.

Why do front-end developers ever promote Primer reactjs? The front-end developer should try it one time. I’m sure 100% it will change your opinion of yourself.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh.dev, Nextjs, front-end web, and Sign up for a free newsletter.