awran5

function getRandomId() {
  return Array.from(window.crypto.getRandomValues(new Uint32Array(4)))
    .map((number) => number.toString(16))
    .join('-')
}

awran5

import React, { useEffect, useRef } from 'react';

/**
 * Use setInterval with Hooks in a declarative way.
 *
 * @see https://stackoverflow.com/a/59274004/3723993
 * @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 */
export function useInterval(
  callback: React.EffectCallback,

awran5

1. Install

npm i prismjs
npm i -D @types/prismjs

2. Import

import React, { useEffect } from 'react'
import Prism from 'prismjs'

awran5

{
   "encryptedData": "your-key"
}

awran5

// Some useful shorthanded JavaScript functions 

// select an element
const select = e => document.querySelector(e)
// Select multiple elements
const selectAll = e => document.querySelectorAll(e)

// Show DOM element
const show = e => (e.style.display = '')
// Hide DOM element

awran5

[
    {
        "quote": "Be yourself; everyone else is already taken.",
        "author": "Oscar Wilde",
        "profession": "Irish poet",
        "topics": [
            "Inspirational",
            "Advice",
            "Humor"
        ]

awran5

This originally was based on slider field

I've changed its structure to avoid loading of heavy jquery UI so its only used the basic HTML5 type range input

1. php Filter

function cmb2_render_range( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ){

  $slider = $field_type_object->input( array(
    'type'  => 'range',

awran5

1. Copy this code to your project CSS file

/* Start Switch field */
.switch-field .cmb2-radio-list li {
	padding-right: 0 !important;
	margin: 0;
}

.switch-field .cmb2-radio-list input {