Breaking News: Grepper is joining You.com. Read the official announcement!

react context ts example

Add Answer

Adventurous Aardvark answered on February 28, 2022 Popularity 10/10 Helpfulness 7/10

answer react context ts example

related react ts createcontext

related react context with typescript

related How to use React context in typescript

react context ts example

Comment

import * as React from "react";

const initialState = {
  state: "",
  setState: () => {},
};

interface IContext {
  state: string;
  setState: React.Dispatch<React.SetStateAction<string>>;
}

const myContext =
  React.createContext<IContext>(initialState);

const MyContextProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [state, setState] = React.useState("");

  return (
    <myContext.Provider
      value={{ state, setState }}
    >
      {children}
    </myContext.Provider>
  );
};

// hook for using context
export const useMyContext = () => React.useContext(myContext);

export default MyContextProvider;

Popularity 10/10 Helpfulness 7/10 Language typescript

Source: Grepper

Tags: react-context typescript

Link to this answer
Share Copy Link

Contributed on Dec 20 2022

Adventurous Aardvark

0 Answers Avg Quality 2/10

Closely Related Answers

react ts createcontext

Comment

import * as React from "react";

interface AppContextInterface {
  name: string;
  author: string;
  url: string;
}

const AppCtx = React.createContext<AppContextInterface | null>(null);

Popularity 10/10 Helpfulness 5/10 Language typescript

Source: react-typescript-cheatsheet.netlify.app

Tags: createcontext cr

Link to this answer
Share Copy Link

Contributed on Feb 28 2022

Clever Cowfish

0 Answers Avg Quality 2/10

react context with typescript

Comment

import { createContext } from "react";

interface AppContextInterface {
  name: string;
  author: string;
  url: string;
}

const AppCtx = createContext<AppContextInterface | null>(null);

// Provider in your app

const sampleAppContext: AppContextInterface = {
  name: "Using React Context in a Typescript App",
  author: "thehappybug",
  url: "http://www.example.com",
};

export const App = () => (
  <AppCtx.Provider value={sampleAppContext}>...</AppCtx.Provider>
);

// Consume in your app
import { useContext } from "react";

export const PostInfo = () => {
  const appContext = useContext(AppCtx);
  return (
    <div>
      Name: {appContext.name}, Author: {appContext.author}, Url:{" "}
      {appContext.url}
    </div>
  );
};

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: react-typescript-cheatsheet.netlify.app

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Oct 22 2022

Panicky Parrot

0 Answers Avg Quality 2/10

How to use React context in typescript

Comment

// @types.todo.ts
export interface ITodo {
  id: number;
  title: string;
  description: string;
  status: boolean;
}
export type TodoContextType = {
  todos: ITodo[];
  saveTodo: (todo: ITodo) => void;
  updateTodo: (id: number) => void;
};

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: blog.logrocket.com

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Shaun Modipane

0 Answers Avg Quality 2/10

How to use React context in typescript

Comment

// components/AddTodo.tsx
import * as React from 'react';
import { TodoContext } from '../context/todoContext';
import { TodoContextType, ITodo } from '../@types/todo';

const AddTodo: React.FC = () => {
  const { saveTodo } = React.useContext(TodoContext) as TodoContextType;
  const [formData, setFormData] = React.useState<ITodo | {}>();
  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
    setFormData({
      ...formData,
      [e.currentTarget.id]: e.currentTarget.value,
    });
  };
  const handleSaveTodo = (e: React.FormEvent, formData: ITodo | any) => {
    e.preventDefault();
    saveTodo(formData);
  };
  return (
    <form className="Form" onSubmit={(e) => handleSaveTodo(e, formData)}>
      <div>
        <div>
          <label htmlFor="name">Title</label>
          <input onChange={handleForm} type="text" id="title" />
        </div>
        <div>
          <label htmlFor="description">Description</label>
          <input onChange={handleForm} type="text" id="description" />
        </div>
      </div>
      <button disabled={formData === undefined ? true : false}>Add Todo</button>
    </form>
  );
};
export default AddTodo;

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: blog.logrocket.com

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Shaun Modipane

0 Answers Avg Quality 2/10

How to use React context in typescript

Comment

-1

// context/todoContext.tsx
import * as React from 'react';
import { TodoContextType, ITodo } from '../@types/todo';

export const TodoContext = React.createContext<TodoContextType | null>(null);

const TodoProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [todos, setTodos] = React.useState<ITodo[]>([
    {
      id: 1,
      title: 'post 1',
      description: 'this is a description',
      status: false,
    },
    {
      id: 2,
      title: 'post 2',
      description: 'this is a description',
      status: true,
    },
  ]);
  const saveTodo = (todo: ITodo) => {
    const newTodo: ITodo = {
      id: Math.random(), // not really unique - but fine for this example
      title: todo.title,
      description: todo.description,
      status: false,
    };
    setTodos([...todos, newTodo]);
  };
  const updateTodo = (id: number) => {
    todos.filter((todo: ITodo) => {
      if (todo.id === id) {
        todo.status = true;
        setTodos([...todos]);
      }
    });
  };
  return <TodoContext.Provider value={{ todos, saveTodo, updateTodo }}>{children}</TodoContext.Provider>;
};

export default TodoProvider;

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: blog.logrocket.com

Tags: react-context re

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Shaun Modipane

0 Answers Avg Quality 2/10

react context ts example

Contents

More Related Answers

react context ts example

Closely Related Answers

react ts createcontext

react context with typescript

How to use React context in typescript

How to use React context in typescript

How to use React context in typescript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.