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