Skip to content

Instantly share code, notes, and snippets.

@ChrisDobby
ChrisDobby / forwardRef.tsx
Created Jul 30, 2019
Example of React component in Typescript using forwarding refs
View forwardRef.tsx
import * as React from "react";
const Forward = React.forwardRef((props, ref: React.Ref<HTMLDivElement>) => (
<div ref={ref} style={{ width: "100%", height: "30px", backgroundColor: "green" }} />
));
function ForwardRef() {
const divRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
View useGetAnnotation.test.tsx
import * as React from "react";
import { render, RenderResult } from "@testing-library/react";
import fetch from "jest-fetch-mock";
import { useGetAnnotation } from "./useGetAnnotation";
import { act } from "react-dom/test-utils";
fetch.enableMocks();
const presignedUrl = "https:/a-presigned-url";
const testXml = btoa("<something/>");
@ChrisDobby
ChrisDobby / canvasDraw.jsx
Last active Jun 7, 2020
React component to redraw a canvas when resized
View canvasDraw.jsx
import React from "react";
const scaleWidth = 500;
const scaleHeight = 500;
function draw(canvas, scaleX, scaleY) {
const context = canvas.getContext("2d");
context.scale(scaleX, scaleY);
context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
@ChrisDobby
ChrisDobby / widthAndHeight.jsx
Created Jul 28, 2019
React component to display the width and height of the window
View widthAndHeight.jsx
import React from "react";
function WidthAndHeight() {
const [width, setWidth] = React.useState(window.innerWidth);
const [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
window.addEventListener("resize", updateWidthAndHeight);
return () => window.removeEventListener("resize", updateWidthAndHeight);
});
View UIKitTabs.jsx
import React from "react";
import { Tabs, ButtonGroup, Button } from "@emisgroup/ui-kit-react";
const TabComponent = () => {
const tabsList = [{ text: "Tab1" }, { text: "Tab2" }, { text: "Tab3" }];
const [selectedTab, setSelectedTab] = React.useState(0);
return (
<>
<Tabs tabsList={tabsList} activeTab={selectedTab} onTabSelect={setSelectedTab} />
View UIKitEntryComponents.jsx
import React from "react";
import { Dropdown, Checkbox, RadioButtons, FormElement } from "@emisgroup/ui-kit-react";
const testData = [
{
text: "Item one",
isChecked: false,
radioItem: "one",
},
{
@ChrisDobby
ChrisDobby / hookRef.tsx
Created Jul 30, 2019
Example of React component in Typescript using the useRef hook
View hookRef.tsx
import * as React from "react";
function HookRef() {
const divRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
if (divRef.current) {
console.log(`hookRef div width: ${divRef.current.clientWidth}`);
}
}, []);
View evenWord.js
function evenWord(word) {
let charCounts = [...word].reduce(
(charCount, char) => ({
...charCount,
[char]: charCount[char] ? charCount[char] + 1 : 1,
}),
{},
);
return Object.entries(charCounts).filter(([_, count]) => count % 2 !== 0).length;
}
@ChrisDobby
ChrisDobby / callbackRef.tsx
Created Jul 30, 2019
Example of React component in Typescript using a callback to set a ref
View callbackRef.tsx
import * as React from "react";
class CallbackRef extends React.Component {
divRef: HTMLDivElement | null = null;
setDivRef = (element: HTMLDivElement) => {
this.divRef = element;
};
componentDidMount() {
@ChrisDobby
ChrisDobby / createRef.tsx
Created Jul 30, 2019
Example of React component in Typescript using createRef
View createRef.tsx
import * as React from "react";
class CreateRef extends React.Component {
divRef = React.createRef<HTMLDivElement>();
componentDidMount() {
if (this.divRef.current) {
console.log(`createRefRef div width: ${this.divRef.current.clientWidth}`);
}
}
You can’t perform that action at this time.