silicakes

# Relies on ripgrep: https://github.com/BurntSushi/ripgrep
#
# Params: 
# <library-name> a string with or without quotes
#
# Usage:
# $ ./extracAllNamedImports <library-name>

# Output
# $ ./getNamedImportsByLibrary.sh date-fns

shilman

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

abuduba

const isEqual = (a, b) => {
  const aKeys = Object.keys(a);

  if (aKeys.length !== Object.keys(b).length) {
    return false;
  }

  return aKeys.every(
    (k) => Object.prototype.hasOwnProperty.call(b, k)
      && a[k] === b[k],

hjzheng

function addComments(arg, name) {
  // 当参数前的注释不存在的情况, 加入 webpackChunkName 注释
  if (!arg.leadingComments) {
    arg.leadingComments = [
      {
        type: 'CommentBlock',
        value: ` webpackChunkName: '${name}' `,
      },
    ]
  }

jalbam

'use strict';

// @license http://opensource.org/licenses/MIT
// copyright Paul Irish 2015
// Added code by Aaron Levine from: https://gist.github.com/Aldlevine/3f716f447322edbb3671
// Some modifications by Joan Alba Maldonado.
// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values
// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed
// Gist: https://gist.github.com/jalbam/cc805ac3cfe14004ecdf323159ecf40e

danielt69

// https://codepen.io/P3R0/pen/MwgoKv
var matrix = (function(){
   var init = function() {
      document.body.style.background = 'black';
      var mdr = document.createElement('canvas');
      mdr.id = "mdr";
      mdr.style.display = 'block';
      mdr.style.position = 'fixed';
      mdr.style.top = '0';
      mdr.style.left = '0';

joshuacerbito

/**
 * useScroll React custom hook
 * Usage:
 *    const { scrollX, scrollY, scrollDirection } = useScroll();
 */

import { useState, useEffect } from "react";

export function useScroll() {
  const [lastScrollTop, setLastScrollTop] = useState(0);

sarthology

let regex;

/* matching a specific string */
regex = /hello/; // looks for the string between the forward slashes (case-sensitive)... matches "hello", "hello123", "123hello123", "123hello"; doesn't match for "hell0", "Hello" 
regex = /hello/i; // looks for the string between the forward slashes (case-insensitive)... matches "hello", "HelLo", "123HelLO"
regex = /hello/g; // looks for multiple occurrences of string between the forward slashes...

/* wildcards */
regex = /h.llo/; // the "." matches any one character other than a new line character... matches "hello", "hallo" but not "h\nllo"
regex = /h.*llo/; // the "*" matches any character(s) zero or more times... matches "hello", "heeeeeello", "hllo", "hwarwareallo"

MikaelCarpenter

import React, { Component } from 'react';
import ReactSelect, { components } from 'react-select';

const TextOption = props => (
  components.Option && (
    <components.Option { ...props }>
      ...
    </components.Option>
  )
);

iliran11

  componentDidUpdate(prevProps) {
      for (const index in prevProps) {
        if (prevProps[index] !== this.props[index]) {
          console.log(index, this.props[index], '-->', prevProps[index]);
        }
      }
    }