ghikurniawan / nextjs-components Goto Github PK

View Code? Open in Web Editor NEW

A collection of React components, transcribed from https://vercel.com/design.

JavaScript 0.92% TypeScript 80.29% CSS 18.79%

nextjs-components's Introduction

nextjs-components

A collection of React components, transcribed from https://vercel.com/design. ¹

Motivation

Blog post from 01/09/2022

Installation

# with npm
npm i nextjs-components

# with yarn
yarn add nextjs-components

This project needs to be transpiled to work with your Next.js application. It is recommended to use Next.js 13.1.0’s built-in module tranpilation. (Up until Next.js 13.1.0, next-transpile-modules handled this use case.)

// next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: true,
  pageExtensions: ["tsx", "ts"],
  swcMinify: true,
  transpilePackages: ["nextjs-components"],
};

module.exports = nextConfig;

Usage

Using Next 13's app directory

"use client";

// ./app/layout.tsx
import { ThemeContextProvider } from "nextjs-components/src/contexts/ThemeContext";
import "nextjs-components/src/styles/globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeContextProvider>{children}</ThemeContextProvider>
      </body>
    </html>
  );
}

Using the traditional custom _app.tsx

// ./pages/_app.tsx
import {
  ThemeContextProvider,
  ToastArea,
  ToastsProvider,
} from "nextjs-components";
import "nextjs-components/src/styles/globals.css";

function App({ Component, pageProps }) {
  return (
    <ThemeContextProvider>
      <ToastsProvider>
        <Component {...pageProps} />
        <ToastArea />
      </ToastsProvider>
    </ThemeContextProvider>
  );
}

export default App;

Check out the documentation site for more examples!

Warning: Dropped create-react-app support.

In older versions, usage with create-react-app was supported. However, from >=v1.0.0, the pre-built /dist folder was dropped.