Skip to content

Instantly share code, notes, and snippets.

Avatar

Filippo Rivolta frivolta

View GitHub Profile
@frivolta
frivolta / createGenericContext.tsx
Created Sep 4, 2020
createGenericContext.tsx - typing-react-context-v2
View createGenericContext.tsx
import React from "react";
export const createGenericContext = <T extends unknown>() => {
// Create a context with a generic parameter or undefined
const genericContext = React.createContext<T | undefined>(undefined);
// Check if the value provided to the context is defined or throw an error
const useGenericContext = () => {
const contextIsDefined = React.useContext(genericContext);
if (!contextIsDefined) {
@frivolta
frivolta / ChildComponent.tsx
Created Sep 4, 2020
useSidebarContext.tsx - typing-react-context-v1-v2
View ChildComponent.tsx
import React from "react";
import { useSidebarContext } from "./useSidebarContext";
export const ChildComponent: React.FC = () => {
const [isOpen, setIsOpen] = useSidebarContext();
return (
<>
<p>Sidebar is: {isOpen ? "Open" : "Closed"}</p>
<button onClick={() => setIsOpen(!isOpen)}>Toggle sidebar</button>
@frivolta
frivolta / useSidebarContext.tsx
Created Sep 4, 2020
useSidebarContext.tsx - typing-react-context-v2
View useSidebarContext.tsx
import * as React from "react";
import { useSidebar, UseSidebar } from "./useSidebar";
import { createGenericContext } from "./createGenericContext";
interface Props {
children: React.ReactNode;
}
// Generate context
const [useSidebarContext, SidebarContextProvider] = createGenericContext<
UseSidebar
@frivolta
frivolta / useSidebar.tsx
Created Sep 4, 2020
useSidebar.tsx - typing-react-context-v2
View useSidebar.tsx
import { useState, useEffect } from "react";
export type UseSidebar = [
boolean,
React.Dispatch<React.SetStateAction<boolean>>
];
export const useSidebar = (newOpenValue: boolean): UseSidebar => {
const [isOpen, setIsOpen] = useState(true);
@frivolta
frivolta / index.tsx
Last active Sep 4, 2020
index.tsx - typing-react-context-v2
View index.tsx
import * as React from "react";
import { render } from "react-dom";
import { SidebarProvider, useSidebarContext } from "./useSidebarContext";
import { ChildComponent } from "./childComponent";
export const App = () => {
const [isOpen] = useSidebarContext();
return (
<div>
@frivolta
frivolta / useSidebarContext.tsx
Created Sep 4, 2020
useSidebarContext.tsx - typing-react-context-v1
View useSidebarContext.tsx
import * as React from "react";
import { useSidebar, UseSidebar } from "./useSidebar";
interface Props {
children: React.ReactNode;
}
// Generate context
const SidebarContext = React.createContext<UseSidebar>(undefined!);
@frivolta
frivolta / useSidebar.tsx
Created Sep 4, 2020
useSidebar.tsx - typing-react-context-v1
View useSidebar.tsx
import { useState, useEffect } from "react";
export type UseSidebar = [
boolean,
React.Dispatch<React.SetStateAction<boolean>>
];
export const useSidebar = (newOpenValue: boolean): UseSidebar => {
const [isOpen, setIsOpen] = useState(true);
@frivolta
frivolta / index.tsx
Last active Sep 4, 2020
index.tsx - typing-react-context-v1
View index.tsx
import * as React from "react";
import { render } from "react-dom";
import { SidebarProvider, useSidebarContext } from "./useSidebarContext";
import { ChildComponent } from "./childComponent";
export const App = () => {
const [isOpen] = useSidebarContext();
return (
<div>
View genericType.ts
// Add a new generic type T
const filterArrayByValue = <T>(
items: T[],
propertyName: string,
valueToFilter: string
): T[] => {
return items.filter(item =>item[propertyName] === valueToFilter);
};
View extendGenericType.ts
// Add a new generic type P
const filterArrayByValue = <T, P extends keyof T>(
items: T[],
propertyName: P,
valueToFilter: string
): T[] => {
return items.filter(item =>item[propertyName] === valueToFilter);
};
You can’t perform that action at this time.