gaearon

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

morajabi

import { useLayoutEffect, useCallback, useState } from 'react'

export const useRect = (ref) => {
  const [rect, setRect] = useState(getRect(ref ? ref.current : null))

  const handleResize = useCallback(() => {
    if (!ref.current) {
      return
    }

505aaron

jest.mock('react-dom');

import React from 'react';
import { createPortal } from 'react-dom';
import renderer from 'react-test-renderer';
import ShallowRenderer from 'react-test-renderer/shallow';
import ReactDOM from 'react-dom';

class Drop extends React.Component {
  constructor(props) {

DavidWells

Aligning images

This is a guide for aligning images.

See the full Advanced Markdown doc for more tips and tricks

left alignment

teameh

this._panResponder = PanResponder.create({
  // ----------- NEGOTIATION:
  // A view can become the touch responder by implementing the correct negotiation methods.

    // Should child views be prevented from becoming responder on first touch?
    onStartShouldSetPanResponderCapture: (evt, gestureState) => () => {
      console.info('onStartShouldSetPanResponderCapture');
      return true;
    },

hsleonis

html {
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;

NiklasHogefjord

<?php
/**
 * Plugin Name:     Klarna Checkout Extra Fields
 * Plugin URI:      http://krokedil.com
 * Description:     Add custom input fields to Klarna Checkout page. Added via shortcode [woocommerce_klarna_checkout_extra_fields]. Saved as post_meta to the order directly on .blur via ajax.
 * Version:         1.1
 * Author:          Krokedil
 * Author URI:      http://krokedil.com
 * License:         GPL-2.0+
 * License URI:     http://www.gnu.org/licenses/gpl-2.0.txt

bomberstudios

// Change font (ctrl a)
var doc = context.document,
    selection = context.selection,
    font_name = [doc askForUserInput:"Font name:" initialValue:"Arial"];

function check_layer(layer){
  log(layer)
  var className = layer.className()
  log("Checking layer " + layer + " of klass: " + className)
  if (className == "MSTextLayer") {

timohausmann

/**
 * return the distance between two points.
 *
 * @param {number} x1		x position of first point
 * @param {number} y1		y position of first point
 * @param {number} x2		x position of second point
 * @param {number} y2		y position of second point
 * @return {number} 		distance between given points
 */
Math.getDistance = function( x1, y1, x2, y2 ) {

terkel

// _decimal.scss | MIT License | gist.github.com/terkel/4373420

// Round a number to specified digits.
//
// @param  {Number} $number A number to round
// @param  {Number} [$digits:0] Digits to output
// @param  {String} [$mode:round] (round|ceil|floor) How to round a number
// @return {Number} A rounded number
// @example
//     decimal-round(0.333)    => 0