ezcontext
A implementation of ACV (Action → Context → View) for React
Features
- Lightweight
- Based on new React context API
- Support using multiple contexts at once
- Support computed contexts
- Support High Order Component creator
ezcontext in actions
- Basic Functions https://codesandbox.io/s/m14qn9kyy
- Todo App https://codesandbox.io/s/y3qlo47vxz
Samples
create(value:any, methods):Context
Create a new Context with specified value and method list. If no methods specified, ezcontext creates default wired method which named update(newState)
; const UserContext = ; console; // => "guest"UserContext;console; // => "admin"UserContext;console; // => "guest"
create(value:any, methodCreator:(contextAccessor)=>Object):Context
Create a new Context with specified value and methodCreator. methodCreator retrieves contextAccessor and must return method list
; const Todos = ;
create(...contexts:Context[]):ComputedContext
Create a new ComputedContext which has one or many dependency Context. Once dependency contexts updated, ComputedContext will be recomputed
; const ContextA = ;const ContextB = ;const ContextAB = ; console; // => 3
Create Provider
import create use from "ezcontext";const ContextA = ;const ContextB = ;const Provider = ; const App = <Provider>App content</Provider>;
Create wired component
import create use from "ezcontext";const IdsContext = ;const TodosContext = ; const TodoList = ;
Create an action connected with multiple contexts
import create use from "ezcontext";const IdsContext = ;const TodosContext = ; const AddTodo = $ids $todos const id = ; $ids; $todos;; ;
Create High Order Component
import React from "react";import create use from "ezcontext"; const UserContext = ;const Authenticate = Component props allowUser === $uservalue ? <Component /> : <div>Access denied</div> ;const AdminScreen = { /* render admin screen here */};
Create HOC from context
import React from "react";import create use from "ezcontext"; const UserContext = ;const UserHoc = UserContext;const UserProfile = ;
Create HOC from multiple contexts
import React from "react";import create use from "ezcontext"; const UserContext = ;const ThemeContext = ;const DataContext = ;const Hoc = ;const Dashboard = ;