frivolta

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

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

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

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

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

import * as React from "react";
import { useSidebar, UseSidebar } from "./useSidebar";

interface Props {
  children: React.ReactNode;
}

// Generate context
const SidebarContext = React.createContext<UseSidebar>(undefined!);

frivolta

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

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

// Add a new generic type T
const filterArrayByValue = <T>(
  items: T[],
  propertyName: string,
  valueToFilter: string
): T[] => {
  return items.filter(item =>item[propertyName] === valueToFilter);
};

frivolta

// 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);
};