Skip to content

Instantly share code, notes, and snippets.

View pjchender's full-sized avatar

Aaron Chen pjchender

View GitHub Profile
@pjchender
pjchender / UserList.tsx
Last active July 21, 2022 05:35
Recoil Pattern inspired from useContext
View UserList.tsx
import { STATE, useUsers } from '@/state/user';
import { useEffect } from 'react';
const UserList = () => {
// STEP 4: useUser to get data from state and actions
const { users, actions } = useUsers();
const { removeUser, fetchUsers, resetUser } = actions;
useEffect(() => {
// if you want to get the newest users every time, otherwise the cache will be used
@pjchender
pjchender / Counter.tsx
Created July 11, 2021 10:47
React Context with useReducer Pattern
View Counter.tsx
// https://kentcdodds.com/blog/how-to-use-react-context-effectively
import { useCount } from './count-context';
const Counter = () => {
const { dispatch, state } = useCount();
return (
<div>
<p>{state.count}</p>
@pjchender
pjchender / ColorAdjustment.tsx
Last active September 13, 2022 06:55
useContext + useReducer with TypeScript
View ColorAdjustment.tsx
import * as React from 'react';
import { ChangeEvent } from 'react';
import { ColorSlider } from './ColorSlider';
import { useContext } from './rgb-context';
export interface AdjustmentInputProps
extends React.HTMLProps<HTMLInputElement> {
id: string;
label: string;
@pjchender
pjchender / Form.tsx
Created June 28, 2021 05:21
Nested Object Fields in React Hook Form
View Form.tsx
import { DevTool } from '@hookform/devtools';
import { yupResolver } from '@hookform/resolvers/yup';
import { Button, makeStyles, TextField } from '@material-ui/core';
import { Controller, SubmitHandler, useForm } from 'react-hook-form';
import * as yup from 'yup';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexDirection: 'column',
@pjchender
pjchender / App.tsx
Last active June 27, 2021 16:02
Polymorphic Components with TypeScript
View App.tsx
// https://frontendmasters.com/courses/react-typescript/polymorphic-components/
// STEP 1:增加 as 這個 props 的型別定義
// as 的型別是泛型 E、它需要滿足 React.ElementType、且預設值為 React.ElementType
type ButtonBaseProps<E extends React.ElementType = React.ElementType> = {
children: string;
as?: E;
};
type PrimaryButtonProps = {
@pjchender
pjchender / App.tsx
Last active June 24, 2021 16:43
Limiting Props
View App.tsx
// frontendmasters.com/courses/react-typescript/limiting-props/
/* eslint-disable no-restricted-syntax */
/* eslint-disable react/require-default-props */
type ButtonBase = {
children: string;
};
type PrimaryButtonProps = ButtonBase & {
primary: boolean;
secondary?: never;
@pjchender
pjchender / Dockerfile
Created June 20, 2021 07:03
Docker Compose Example
View Dockerfile
FROM node:14-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]
@pjchender
pjchender / shallowEqual.ts
Last active June 12, 2021 08:50
shallowEqual
View shallowEqual.ts
// source code: https://github.com/facebook/react/blob/master/packages/shared/shallowEqual.js
// TS Playgound: https://tsplay.dev/Nr272N
const shallowEqual = (objA: any, objB: any): boolean => {
if (Object.is(objA, objB)) {
return true;
}
if (
typeof objA !== 'object' ||
@pjchender
pjchender / index.html
Last active July 2, 2020 03:53
movie-vue-create
View index.html
<div id="app">
<!-- navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="./index.html">Movie List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
@pjchender
pjchender / RadioButtonForm.js
Created February 24, 2020 03:01
React Formik with RadioGroup
View RadioButtonForm.js
import React from 'react';
import { Formik, Form, useField } from 'formik';
const GENDERS = [
{
name: 'other',
value: 0,
},
{
name: 'male',