Pinned

1. Typing styled-components props: Vali... Typing styled-components props: Valid string values according to what's available in theme

   1

   import styled from 'styled-components';

   2

   import { ThemeColor } from '../../types';

   3

   4

   interface ButtonProps {

   5

   	color: ThemeColor 

2. CSS previous sibling selector example CSS previous sibling selector example

   1

   // I have sections (called blocks here) that should have top and bottom padding, 

   2

   // unless two of the same kind with the same background colour are together - 

   3

   // in which case I want them to be right up next to each other - no padding between them.

   4

   // In the HTML it looks something like this:

   5

   // <section class="block my-special-block has-primary-background-color">

3. useResize React hook. Dynamically ge... useResize React hook. Dynamically get height and width of an element when its size changes and store the values in state. Demo: https://codesandbox.io/s/useresize-demo-de04o8?file=/src/hooks/useResize.ts

   1

   import { MutableRefObject, useMemo, useEffect, useState } from 'react';

   2

   3

   interface Dimensions {

   4

   	width: number;

   5

   	height: number;

4. useLocalStorage React hook. Keep a s... useLocalStorage React hook. Keep a state value in sync with one cached in the browser using local storage.

   1

   import { useState, useEffect, Dispatch, SetStateAction } from 'react';

   2

   3

   export function useLocalStorage<T>(key: string, defaultValue: T): { value: T; setValue: Dispatch<SetStateAction<T>> } {

   4

   	const [value, setValue] = useState(() => {

   5

   		return localStorage?.getItem(key) ? JSON.parse(localStorage.getItem(key)) : defaultValue;

5. Vertically centred CSS arrow/triangl... Vertically centred CSS arrow/triangle on side of box. Demo: https://codesandbox.io/s/css-arrowbox-demo-8pif6y?file=/src/styles.scss

   1

   $spacing: (

   2

   	xs: 0.25rem,

   3

   	sm: 0.5rem,

   4

   	md: 0.75rem,

   5

   	lg: 1rem,

6. Automatically downgrade a WooCommerc... Automatically downgrade a WooCommerce subscription (to a free, no-expiry variation) instead of expiring it

   1

   <?php

   2

   /**

   3

    * Add base tier option to Advanced tab of subscription product

   4

    */

   5

   function doublee_subscription_product_advanced_settings() {