bluebeel

[use-carousel] Headless UI React hook for building a scroll-based carousel

BYO-UI. No CSS necessary. Inspired by react-table.

Usage:

const {
  getLeftNavProps,
 getRightNavProps,

bluebeel

1. Create a file Image.js from the source below (it is almost a copy of Image.js from tiptap-extensions except that it has a constructor that accepts uploadFunc (function to be called with image being uploaded) and additional logic if(upload) { ... } else { ... previous base64 logic .. } in the new Plugin section.

import {Node, Plugin} from 'tiptap'
import {nodeInputRule} from 'tiptap-commands'

/**
 * Matches following attributes in Markdown-typed image: [, alt, src, title]
 *

bluebeel

// JSX Version by Adam Wathan: https://gist.github.com/adamwathan/e0a791aa0419098a7ece70028b2e641e

import React, { ReactNode } from "react";
import { CSSTransition as ReactCSSTransition } from "react-transition-group";
import { useRef, useEffect, useContext } from "react";

interface TransitionProps {
  show?: boolean;
  enter?: string;
  enterFrom?: string;

bluebeel

import * as React from "react";

type ThemeConfig = "system" | "light" | "dark";
type ThemeName = "light" | "dark";
// Custom themes are keyed by a unique id.
type KeyedThemes = {
  [k: string]: {
    config: ThemeConfig;
    themeName: ThemeName;
  };

bluebeel

import React, { Component } from "react";
import UserProfileMenu from "./UserProfileMenu";

function classNames(...classes) { return classes.filter(Boolean).join(" "); }

class App extends Component {  
  constructor(props) {
    super(props);
    this.state = { isToggleOn: false };       
  }