John Dissolutio

Building for the browser and beyond

Dissolutio / gist:f1de21e4fe480df4c85e8635db38aee4

Created November 5, 2024 17:20

PubSub with event context in React: Fire functions in one element tree from another element tree (handy with React3Fiber)

	# Pub/Sub in React Context

	While React Context is a great way to share data between components, it doesn't inherently implement the Pub/Sub pattern. However, you can combine the two to create a Pub/Sub system within your React application.
	Here's a simple implementation:

	```js
	import React, { createContext, useContext, useState, useEffect } from 'react';

	const EventContext = createContext();

nickyvanurk / camera.tsx

Last active October 2, 2025 11:23

Camera perspective <-> orthographic toggle in r3f and vanilla three.js

	import { useEffect, useRef, useState } from 'react';
	import { useFrame, useThree } from '@react-three/fiber';
	import { MapControls, OrthographicCamera, PerspectiveCamera } from '@react-three/drei';
	import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib';

	export function Camera() {
	const [oldType, setOldType] = useState('PerspectiveCamera');
	const [coords, setCoords] = useState({ x: 0, y: 0 });

	const gl = useThree((state) => state.gl);

dsebastien / react-canvas-typescript-animation.tsx

Created June 21, 2021 22:12

	import { useEffect, useRef } from 'react';

	export function App() {
	// Use a ref to access the Canvas
	const canvasRef = useRef<HTMLCanvasElement>(null);

	// Use a ref to keep access to the Canvas Context
	const canvasCtxRef = useRef<CanvasRenderingContext2D \| null>(null);

	const draw = (ctx: CanvasRenderingContext2D, frameCount: number) => {