Precedent: an Opinionated Collection Of Components, Hooks, Utilities

Introduction

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.

One-click Deploy

You can deploy this template to Vercel with the button below:

You can also clone & create this repo locally with the following command:

npx create-next-app precedent --example "https://github.com/steven-tey/precedent"

Tech Stack + Features

https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4

Frameworks

Next.js – React framework for building performant apps with the best developer experience
Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
Prisma – Typescript-first ORM for Node.js

Platforms

Vercel – Easily preview & deploy changes with git
Railway – Easily provision a PostgreSQL database (no login required)

UI

Tailwind CSS – Utility-first CSS framework for rapid UI development
Radix – Primitives like modal, popover, etc. to build a stellar user experience
Framer Motion – Motion library for React to animate components with ease
Lucide – Beautifully simple, pixel-perfect icons
@next/font – Optimize custom fonts and remove external network requests for improved performance
@vercel/og – Generate dynamic Open Graph images on the edge
react-wrap-balancer – Simple React component that makes titles more readable

Hooks and Utilities

useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
useLocalStorage – Persist data in the browser's local storage
useScroll – React hook to observe scroll position (example)
nFormatter – Format numbers with suffixes like 1.2k or 1.2M
capitalize – Capitalize the first letter of a string
truncate – Truncate a string to a specified length
use-debounce – Debounce a function call / state update

Code Quality

TypeScript – Static type checker for end-to-end typesafety
Prettier – Opinionated code formatter for consistent code style
ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Download Details:

Author: Steven-tey
Source Code: https://github.com/steven-tey/precedent
License: MIT license

#typescript #eslint #nextjs #tailwindcss

Collection vs Collections in Java: Difference Between Collection & Collections in Java

Introduction

This article will be looking into one of the most popular questions in Java Language – What is Collection in Java? Also, what do you mean by Collections in Java? Are Collection and Collections the same or different in Java?

What is Collection?

What is Collections?

Conclusion

#full stack development #collection #collection vs collections in java #collections in java #difference between collection and collections in java

Nat Grady

1677798600

Precedent: An Opinionated Collection Of Components, Hooks, Utilities

Precedent

Building blocks for your Next project

Introduction

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.

One-click Deploy

You can deploy this template to Vercel with the button below:

You can also clone & create this repo locally with the following command:

npx create-next-app precedent --example "https://github.com/steven-tey/precedent"

Tech Stack + Features

https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4

Frameworks

Next.js – React framework for building performant apps with the best developer experience
Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
Prisma – Typescript-first ORM for Node.js

Platforms

Vercel – Easily preview & deploy changes with git
Railway – Easily provision a PostgreSQL database (no login required)

UI

Tailwind CSS – Utility-first CSS framework for rapid UI development
Radix – Primitives like modal, popover, etc. to build a stellar user experience
Framer Motion – Motion library for React to animate components with ease
Lucide – Beautifully simple, pixel-perfect icons
@next/font – Optimize custom fonts and remove external network requests for improved performance
@vercel/og – Generate dynamic Open Graph images on the edge
react-wrap-balancer – Simple React component that makes titles more readable

Hooks and Utilities

useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
useLocalStorage – Persist data in the browser's local storage
useScroll – React hook to observe scroll position (example)
nFormatter – Format numbers with suffixes like 1.2k or 1.2M
capitalize – Capitalize the first letter of a string
truncate – Truncate a string to a specified length
use-debounce – Debounce a function call / state update

Code Quality

TypeScript – Static type checker for end-to-end typesafety
Prettier – Opinionated code formatter for consistent code style
ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Download Details:

Author: steven-tey
Source Code: https://github.com/steven-tey/precedent
License: MIT license

#typescript #eslint #nextjs #prettier

Lawrence Lesch

1674900780

Precedent: an Opinionated Collection Of Components, Hooks, Utilities

Precedent

Building blocks for your Next project

Introduction

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.

One-click Deploy

You can deploy this template to Vercel with the button below:

You can also clone & create this repo locally with the following command:

npx create-next-app precedent --example "https://github.com/steven-tey/precedent"

Tech Stack + Features

https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4

Frameworks

Next.js – React framework for building performant apps with the best developer experience
Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
Prisma – Typescript-first ORM for Node.js

Platforms

Vercel – Easily preview & deploy changes with git
Railway – Easily provision a PostgreSQL database (no login required)

UI

Tailwind CSS – Utility-first CSS framework for rapid UI development
Radix – Primitives like modal, popover, etc. to build a stellar user experience
Framer Motion – Motion library for React to animate components with ease
Lucide – Beautifully simple, pixel-perfect icons
@next/font – Optimize custom fonts and remove external network requests for improved performance
@vercel/og – Generate dynamic Open Graph images on the edge
react-wrap-balancer – Simple React component that makes titles more readable

Hooks and Utilities

useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
useLocalStorage – Persist data in the browser's local storage
useScroll – React hook to observe scroll position (example)
nFormatter – Format numbers with suffixes like 1.2k or 1.2M
capitalize – Capitalize the first letter of a string
truncate – Truncate a string to a specified length
use-debounce – Debounce a function call / state update

Code Quality

TypeScript – Static type checker for end-to-end typesafety
Prettier – Opinionated code formatter for consistent code style
ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Download Details:

Author: Steven-tey
Source Code: https://github.com/steven-tey/precedent
License: MIT license

#typescript #eslint #nextjs #tailwindcss

Abhishek Jaiswal

1607768450

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Lawrence Lesch

1675430549

React Hook for using Keyboard Shortcuts in Components

useHotkeys(keys, callback)

npm i react-hotkeys-hook

A React hook for using keyboard shortcuts in components in a declarative way.

Quick Start

The easiest way to use the hook.

import { useHotkeys } from 'react-hotkeys-hook'

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(count + 1), [count])

  return (
    <p>
      Pressed {count} times.
    </p>
  )
}

Scopes

Scopes allow you to group hotkeys together. You can use scopes to prevent hotkeys from colliding with each other.

const App = () => {
  return (
    <HotkeysProvider initiallyActiveScopes={['settings']}>
      <ExampleComponent />
    </HotkeysProvider>
  )
}

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1), { scopes: ['settings'] })

  return (
    <p>
      Pressed {count} times.
    </p>
  )
}

Changing a scope's active state

You can change the active state of a scope using the deactivateScope, activateScope and toggleScope functions returned by the useHotkeysContext() hook. Note that you have to have your app wrapped in a <HotkeysProvider> component.

const App = () => {
  return (
          <HotkeysProvider initiallyActiveScopes={['settings']}>
            <ExampleComponent />
          </HotkeysProvider>
  )
}

export const ExampleComponent = () => {
  const { toggleScope } = useHotkeysContext()

  return (
    <button onClick={() => toggleScope('settings')}>
      Change scope active state
    </button>
  )
}

Focus trap

This will only trigger the hotkey if the component is focused.

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  const ref = useHotkeys<HTMLParagraphElement>('ctrl+k', () => setCount(prevCount => prevCount + 1))

  return (
    <p tabIndex={-1} ref={ref}>
      Pressed {count} times.
    </p>
  )
}

Documentation & Live Examples

API

useHotkeys(keys, callback)

useHotkeys(keys: string | string[], callback: (event: KeyboardEvent, handler: HotkeysEvent) => void, options: Options = {}, deps: DependencyList = [])

Parameter	Type	Required?	Default value	Description
`keys`	`string` or `string[]`	required	-	set the hotkeys you want the hook to listen to. You can use single or multiple keys, modifier combinations, etc. This will either be a string or an array of strings. To separate multiple keys, use a colon. This split key value can be overridden with the `splitKey` option.
`callback`	`(event: KeyboardEvent, handler: HotkeysEvent) => void`	required	-	This is the callback function that will be called when the hotkey is pressed. The callback will receive the browsers native `KeyboardEvent` and the libraries `HotkeysEvent`.
`options`	`Options`	optional	`{}`	Object to modify the behavior of the hook. Default options are given below.
`dependencies`	`DependencyList`	optional	`[]`	The given callback will always be memoised inside the hook. So if you reference any outside variables, you need to set them here for the callback to get updated (Much like `useCallback` works in React).

Options

All options are optional and have a default value which you can override to change the behavior of the hook.

Option	Type	Default value	Description
`enabled`	`boolean` or `(keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean`	`true`	This option determines whether the hotkey is active or not. It can take a boolean (for example a flag from a state outside) or a function which gets executed once the hotkey is pressed. If the function returns `false` the hotkey won't get executed and all browser events are prevented.
`enableOnFormTags`	`boolean` or `FormTags[]`	`false`	By default hotkeys are not registered if a focus focuses on an input field. This will prevent accidental triggering of hotkeys when the user is typing. If you want to enable hotkeys, use this option. Setting it to true will enable on all form tags, otherwise you can give an array of form tags to enable the hotkey on (possible options are: `['input', 'textarea', 'select']`)
`enableOnContentEditable`	`boolean`	`false`	Set this option to enable hotkeys on tags that have set the `contentEditable` prop to `true`
`combinationKey`	`string`	`+`	Character to indicate keystrokes like `shift+c`. You might want to change this if you want to listen to the `+` character like `ctrl-+`.
`splitKey`	`string`	`,`	Character to separate different keystrokes like `ctrl+a, ctrl+b`.
`scopes`	`string` or `string[]`	`*`	With scopes you can group hotkeys together. The default scope is the wildcard `*` which matches all hotkeys. Use the `<HotkeysProvider>` component to change active scopes.
`keyup`	`boolean`	`false`	Determines whether to listen to the browsers `keyup` event for triggering the callback.
`keydown`	`boolean`	`true`	Determines whether to listen to the browsers `keydown` event for triggering the callback. If you set both `keyup`and `keydown` to true, the callback will trigger on both events.
`preventDefault`	`boolean` or `(keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean`	`false`	Set this to a `true` if you want the hook to prevent the browsers default behavior on certain keystrokes like `meta+s` to save a page. NOTE: Certain keystrokes are not preventable, like `meta+w` to close a tab in chrome.
`description`	`string`	`undefined`	Use this option to describe what the hotkey does. this is helpful if you want to display a list of active hotkeys to the user.

Overloads

The hooks call signature is very flexible. For example if you don't need to set any special options you can use the dependency array as your third parameter:

useHotkeys('ctrl+k', () => console.log(counter + 1), [counter])

`isHotkeyPressed(keys: string | string[], splitKey?: string = ',')`

This function allows us to check if the user is currently pressing down a key.

import { isHotkeyPressed } from 'react-hotkeys-hook'

isHotkeyPressed('esc') // Returns true if Escape key is pressed down.

You can also check for multiple keys at the same time:

isHotkeyPressed(['esc', 'ctrl+s']) // Returns true if Escape or Ctrl+S are pressed down.

Support

Ask your question in the Github Discussions
Ask your question on StackOverflow

Found an issue or have a feature request?

Open up an issue or pull request and participate.

Local Development

Checkout this repo, run yarn or npm i and then run the test script to test the behavior of the hook.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

Download Details:

Author: JohannesKlauss
Source Code: https://github.com/JohannesKlauss/react-hotkeys-hook
License: MIT license

#typescript #javascript #react #hooks #hook