nimone

import { useState, useEffect } from "react"
import { ChevronLeft, ChevronRight } from "react-feather"

export default function Carousel({
  children: slides,
  autoSlide = false,
  autoSlideInterval = 3000,
}) {
  const [curr, setCurr] = useState(0)

KolbySisk

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const schema = z.object({
  email: z.string().email().min(2),
  password: z.string().min(6)
});

export default function RhfFormWithZod() {

shahsagarm

Configure prettier, eslint, husky (pre commit hook), lint-staged in react + typescript project

Steps to configure prettier, eslint, husky (pre commit hook), lint-staged in react + typescript project created using create-react-app. This is opinionated configuration with airbnb's style guide as the base style guide.

Step 1 :: Setup prettier

1.1) Install prettier as dev dependency.

npm install --save-dev --save-exact prettier

kapiljhajhria

Integrate Jest & React Testing Library in a React Vite Project

1. Install Dependencies

yarn add --dev jest babel-jest @babel/preset-env @babel/core @babel/plugin-syntax-jsx @babel/preset-react @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event babel-preset-react-app identity-obj-proxy jest-circus jest-scss-transform jest-watch-typeahead

2. Set Jest & babel configs in package.json

"jest": {
    "roots": [

j-bullard

import "./styles.css";
import { Person } from "./types";
import { Listbox } from "./listbox/listbox";
import { useForm } from "react-hook-form";

const people: Person[] = [
  { id: 1, name: "Durward Reynolds", unavailable: false },
  { id: 2, name: "Kenton Towne", unavailable: false },
  { id: 3, name: "Therese Wunsch", unavailable: false },
  { id: 4, name: "Benedict Kessler", unavailable: true },

mnghn07

Inspired by parmentf/commit-message-emoji

See also gitmoji.

Commit type	Emoji
Initial commit	🎉 :tada:
Version tag	🔖 :bookmark:
New feature	✨ :sparkles:
Bugfix	🐛 :bug:

esouthren

/*
 * Copyright 2018-2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License").
 * You may not use this file except in compliance with the License.
 * A copy of the License is located at
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * or in the "license" file accompanying this file. This file is distributed
 * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
 * express or implied. See the License for the specific language governing

MiyacoGBF

How to Install FAR, HD Texture Pack, and ReShade (GShade) for NieR:Automata on Linux

About

Links

• FAR (Fix (NieR) Automata Resolution) -- Required by HD Texture Pack.

• HD Texture Pack

andrejsharapov

.container {
    position: relative;
    margin: 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
    width: 100%;

    @include mq(sm) {
        max-width: $col-sm;
    }

Merott

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

• You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
• You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.