Code Snippets TSX

Short texts TSX 🧑‍💻 Code snippets TSX ✍️ Reading lists TSX 👀

Re write of https://github.com/crubier/react-graph-vis to a function component for strict mode compliance

import React, { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState, } from ‘react’; import { DataSet } from ‘vis-data’; import { Network, Edge, Node, Options, NetworkEvents, IdType, } from ‘vis-network’; import { differenceWith, intersectionWith, isEqual, defaultsDeep, cloneDeep, } from ‘lodash’; export type { Network, Edge, Node, Options, NetworkEvents, IdType }; export type GraphEvents = Partial< // […]

Stitches Create Scale Variant

import { CSS } from ‘@stitches/react’ import { theme } from ‘./stitches.config’ function createScaleVariant( property: string, scale: Scale, ): Record { return Object.keys(theme.space).reduce( (reduced, value) => ({ …reduced, [value]: { [property]: `$${scale}$${value}`, }, }), {} as Record, ) } /* m: createScaleVariant(‘margin’, ‘space’), mi: createScaleVariant(‘marginInline’, ‘space’), mis: createScaleVariant(‘marginInlineStart’, ‘space’), mie: createScaleVariant(‘marginInlineEnd’, ‘space’), mb: createScaleVariant(‘marginBlock’, ‘space’), […]

Flex scroll container for Solid JS

import { Component } from ‘solid-js’; import { HTMLElementEvent } from ‘../../@types/alltypes’; import { throttle } from ‘../lib/helpers’; interface Props { className?: string; children: any; ref: (el: HTMLDivElement) => HTMLDivElement; onScroll?: (e: HTMLElementEvent) => void; onScrollEnd?: () => void; } const ScrollContainer: Component = (props) => { const handleScroll = throttle((e) => { const { […]

React TypeScript Basic Component

interface Props { title : string color?: string } const Header = (props : Props) => { return ( {props.title} ) } export default Header;

React TypeScript Basic Component

interface Props { title : string color?: string } const Header = (props : Props) => { return ( {props.title} ) } export default Header;