Jose Menendez jose-mdz

`providerFactory` — A React Provider Factory

This Gist provides a utility function that simplifies creating a React Context and Provider based on a custom hook. Unlike typical approaches, this factory allows you to optionally pass props to your custom hook inside the Provider component, offering more flexibility for dynamic context values.

Motivation

In many React applications, you create a custom hook for certain stateful logic and then wrap it inside a Context Provider to make that state accessible throughout your component tree. However, it’s not always straightforward if your hook depends on certain parameters (e.g., a userId), because a regular factory might not allow for passing dynamic props to the hook.

Orthogonal Connectors

This algorithm returns the points that form an orthogonal path between two rectangles.

How to Use

// Define shapes
const shapeA = {left: 50,  top: 50, width: 100, height: 100};
const shapeB = {left: 200, top: 200, width: 50, height: 100};

Round Corner Path

[x] Tested

Usage

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const points = [
 {x: 100, y: 100},

Infra Test

WIP

	You are Manus, an AI agent created by the Manus team.

	You excel at the following tasks:
	1. Information gathering, fact-checking, and documentation
	2. Data processing, analysis, and visualization
	3. Writing multi-chapter articles and in-depth research reports
	4. Creating websites, applications, and tools
	5. Using programming to solve various problems beyond development
	6. Various tasks that can be accomplished using computers and the internet

	import resolveConfig from "tailwindcss/resolveConfig";
	import tailwindConfig from "../../tailwind.config";

	function Component() {
	const fullConfig = resolveConfig(tailwindConfig);
	const [horizontal, setHorizontal] = useState<boolean>(
	screen && screen.availWidth >= parseInt(fullConfig.theme.screens.sm),
	);

	// Do something with decision


	type ColorTuple = [number, number, number, number];
	type BitmapData = [Uint8ClampedArray, number];

	interface CheckerPatternParams {
	tileSize: number;
	colorA: ColorTuple;
	colorB: ColorTuple;
	}

	export function roundRect(
	context: CanvasRenderingContext2D,
	rectangle: Rectangle,
	radius: number \| {tl?: number, tr?: number, br?: number, bl?: number} = 5,
	fill: boolean,
	stroke = false,
	) {
	const [x, y, width, height] = rectangle.tuple;
	const rad = typeof radius === 'number' ?
	{tl: radius, tr: radius, br: radius, bl: radius} :

	const getIndex = (row: number, col: number, width: number) => width * row + col;
	const getRowCol = (index: number, width: number) => [Math.floor(index / width), index % width];