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

react context with typescript

Add Answer

Panicky Parrot answered on August 19, 2022 Popularity 10/10 Helpfulness 4/10

answer react context with typescript

related react context ts example

related react typescript context API

related How to use React context in typescript

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 typescript whatever

Link to this answer
Share Copy Link

Contributed on Oct 22 2022

Panicky Parrot

0 Answers Avg Quality 2/10

Closely Related Answers

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 re

Link to this answer
Share Copy Link

Contributed on Dec 20 2022

Adventurous Aardvark

0 Answers Avg Quality 2/10

react typescript context API

Comment

export type TodosContextState = {
  todos: string[];
  addTodo: (name: string) => void;
};
import React, { createContext, useState, FC } from "react";
import { TodosContextState } from "./types";

const contextDefaultValues: TodosContextState = {
  todos: [],
  addTodo: () => {}
};

export const TodosContext = createContext<TodosContextState>(
  contextDefaultValues
);

const TodosProvider: FC = ({ children }) => {
  const [todos, setTodos] = useState<string[]>(contextDefaultValues.todos);

  const addTodo = (newTodo: string) => setTodos((todos) => [...todos, newTodo]);

  return (
    <TodosContext.Provider
      value={{
        todos,
        addTodo
      }}
    >
      {children}
    </TodosContext.Provider>
  );
};

export default TodosProvider;

Popularity 10/10 Helpfulness 5/10 Language typescript

Source: dev.to

Tags: api

Link to this answer
Share Copy Link

Contributed on Aug 19 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 with typescript

Contents

More Related Answers

react context with typescript

Closely Related Answers

react context ts example

react typescript context API

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.