react-context-stateful v1.1.0

react-context-stateful

A simple wrapper that makes it easy to create simple, stateful contexts.

Install

# Using NPM
npm install react-context-stateful

# Using Yarn
yarn add react-context-stateful

Usage

To create a stateful context, pass createStatefulContext() a functional component and export its results:

// TodoContext.jsx

import createStatefulContext from 'react-context-stateful'

export [
	useTodo,
	TodoProvider
] = createStatefulContext(Provider => ({ children }) =>
{
	const [todoList, setTodoList] = useState([])

	const addTodoItem = item =>
	{
		// ...
	}

	const popTodoItem = () =>
	{
		// ...
	}

	return (
		<Provider value={ {
			addTodoItem,
			popTodoItem
		} }>
			{ children }
		</Provider>
	)
})

The Provider component can then be used at the project root:

// index.js

import { TodoProvider } from './TodoContext'

ReactDOM.render(
	<TodoProvider>
		<App />
	</TodoProvider>,
	document.getElementById('root')
)

The Context object is then available to use in hooks:

// TodoAdder.jsx

const TodoAdder = () =>
{
	const { addTodoItem } = useTodo()

	// ...
}

export default TodoAdder

This package also includes support for defining your contexts with TypeScript:

import createStatefulContext from 'react-context-stateful'

type TodoState = {
	popTodoItem: () => string
	addTodoItem: (item: string) => void
}

export [
	useTodo,
	TodoProvider
] = createStatefulContext<TodoState>(Provider => ({ children }) =>
{
	const [todoList, setTodoList] = useState<string[]>([])

	const addTodoItem = (item: string) =>
	{
		// ...
	}

	const popTodoItem = (): string =>
	{
		// ...
	}

	return (
		<Provider value={ {
			addTodoItem,
			popTodoItem
		} }>
			{ children }
		</Provider>
	)
})