httpJunkie

import { useEffect, useState } from 'react';

  const debounce = (delay: number, fn: any) => {
     let timerId: any;

     return function (...args: any[]) {
        if (timerId) {
           clearTimeout(timerId);
        }

httpJunkie

function useWindowDimensions() {
  
  // set our default for the state to the curent width and height
  const [width, setWidth] = React.useState(window.innerWidth)
  const [height, setHeight] = React.useState(window.innerHeight)
  
  // constantly update our state as the window is resized
  React.useEffect(() => {
    const listenenr = () => {
      setWidth(window.innerWidth)

httpJunkie

Newsletters

• WebAIM
• t12t
• Funka

Blog Articles

• My Accessibility Journey: What I’ve Learned So Far
• A Developer’s Guide to Better Accessibility

httpJunkie

/* These changes to the Todo.js file, and the todoReducer.js file */
/* Can be applied to the following git commit to build the Todo App with Reducer logic */
/* 
  coomit: 5e7d1ae9ac2d2943c088799ac902063f1ba38c9a
  repo: https://github.com/httpJunkie/react-todo
*/

/* #Step 01: Add useReducer, initial state and useRef hooks */

  import { todoReducer } from './todoReducer';

httpJunkie

/* https://stackblitz.com/edit/use-local-storage-state */

function useLocalStorageState(key, defaultValue) {
  const [state, setState] = useState(() => {
    let value
    try {
      value = JSON.parse(
        window.localStorage.getItem('my-app-count') || JSON.stringify(defaultValue)
      )
    } catch (e) {

httpJunkie

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build

httpJunkie

import React from 'react';

export default class SmartContainerComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      products: [
        { name: "Winged Fighter", productCode: "XJ1000" },
        { name: "R2D2", productCode: "r2Dee2" }
      ]

httpJunkie

export const gridData = [
  {
      "ProductID": 1,
      "ProductName": "Chai",
      "SupplierID": 1,
      "CategoryID": 1,
      "QuantityPerUnit": "10 boxes x 20 bags",
      "UnitPrice": 18,
      "UnitsInStock": 39,
      "UnitsOnOrder": 0,

httpJunkie

import React from 'react';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
import { panelBarData } from '../data/appData';

const imageUrl = (imageName) => ('img/'+ imageName +'.jpg');

export const PanelBarContainer = () => (
  <PanelBar >
    <PanelBarItem expanded={true} title="My Teammates">
      <div>

httpJunkie

.teammate:after {
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}
.teammate h2 {
  font-size: 1.3em;