{"id":19164380,"url":"https://github.com/ericdowell/react-yahl","last_synced_at":"2025-10-31T08:44:55.683Z","repository":{"id":42676853,"uuid":"510525196","full_name":"ericdowell/react-yahl","owner":"ericdowell","description":"Yet Another Helper Library for React","archived":false,"fork":false,"pushed_at":"2022-07-11T04:00:29.000Z","size":750,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-15T14:50:24.517Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ericdowell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-04T23:08:58.000Z","updated_at":"2022-07-06T03:50:04.000Z","dependencies_parsed_at":"2022-09-06T21:10:34.026Z","dependency_job_id":null,"html_url":"https://github.com/ericdowell/react-yahl","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericdowell%2Freact-yahl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericdowell%2Freact-yahl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericdowell%2Freact-yahl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericdowell%2Freact-yahl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericdowell","download_url":"https://codeload.github.com/ericdowell/react-yahl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240245902,"owners_count":19771028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T09:21:47.831Z","updated_at":"2025-10-31T08:44:55.577Z","avatar_url":"https://github.com/ericdowell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yet Another Helper Library for React\n[![CircleCI](https://dl.circleci.com/status-badge/img/gh/ericdowell/react-yahl/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/ericdowell/react-yahl/tree/main)\n[![npm version](https://img.shields.io/npm/v/react-yahl.svg?style=flat-square)](https://www.npmjs.com/package/react-yahl)\n[![npm downloads](https://img.shields.io/npm/dm/react-yahl.svg?style=flat-square)](http://npm-stat.com/charts.html?package=react-yahl)\n\nA simple library to make using React things easier, e.g. making Context + Reducer setup, state and dispatching.\n\n## What does this library solve?\n\nRemoving the `swtich` statement often times used with React Reducers and remove the obvious repeating pattern.\n\nTake for example this reducer/context:\n\n```js\n// ./index.js\nimport React, { createContext, useReducer } from 'react'\nimport Reducer from './reducer'\n\nconst initialState = {\n  user: null,\n  initialized: false,\n}\n\nexport const Context = createContext({ state: initialState, dispatch: () =\u003e {}})\n\nexport const Store = ({ children }) =\u003e {\n  const [state, dispatch] = useReducer(Reducer, initialState)\n  return (\n    \u003cContext.Provider value={{ state, dispatch }}\u003e{children}\u003c/Context.Provider\u003e\n  )\n}\n```\nA basic context with the Context.Provider exposer the React.Reducer.\n```js\n// ./reducer.js\nconst Reducer = (state, action) =\u003e {\n  switch (action.type) {\n    case 'SET_USER':\n      return {\n        ...state,\n        user: action.payload,\n      }\n    case 'SET_INITIALIZED':\n      return {\n        ...state,\n        initialized: action.payload,\n      }\n    default:\n      return state\n  }\n}\n\nexport default Reducer\n```\n\nIn both cases all we're doing is a copying (shallow) `state` by using the spread operator and setting the specific object key\nequal to the `action.payload` based on the `action.type`.\n\nOn top of that calling `dispatch` is complex:\n```jsx\nimport { Context } from '../context'\nconst Example = () =\u003e {\n    const { dispatch } = useContext(Context)\n    dispatch({ type: 'SET_USER', payload: user })\n}\n```\n\nSo instead of forcing on the `dispatch` payload and the adding the missing `switch` `case` this library allows you to skip\nthese things, instead this provides an easier way to merge `state` and dispatch via `helpers`.\n\n## Code Examples\n```js\nimport { createStateProvider } from 'react-yahl'\nimport { fetchCurrentUser } from '../api'\n\nexport const actions = {\n    APP_INITIALIZE: 'initialized',\n    SET_USER: 'user',\n}\n\nconst initialState = {\n    [actions.APP_INITIALIZE]: false,\n    [actions.SET_USER]: null,\n}\n\nexport const [Context, StateProvider] = createStateProvider({\n    initialState,\n    actions,\n    providerHelpers: (dispatch) =\u003e ({\n        initializeUser: function () {\n            fetchCurrentUser().then((response) =\u003e {\n                if (response.status === 200 \u0026\u0026 response.data.user) {\n                    this.setUser(response.data.user)\n                }\n                this.action(actions.APP_INITIALIZE, true)\n            })\n        },\n        setUser: function (user) {\n            this.action(actions.SET_USER, user)\n        },\n    }),\n})\n```\nThen wrap your `App` with the `StateProvider`:\n```jsx\nimport { StateProvider } from './context'\nimport { createRoot } from 'react-dom/client';\n\nconst container = document.getElementById('app');\nconst root = createRoot(container); // createRoot(container!) if you use TypeScript\nroot.render(\u003cStateProvider\u003e\u003cApp tab=\"home\" /\u003e\u003c/StateProvider\u003e);\n```\n\nAfter that you may `useContext` within a component object destructure `state`/`dispatch`/`helpers`.\n\nNote that `helpers` also contains a `action` function to help shorten the usage of the normal reducer `dispatch` function.\n```jsx\nimport { useEffect } from 'react'\nimport { actions, Context } from '../../context'\n\nexport function UserExample() {\n    // The different options to (object) destructure from the context.\n    const { state, helpers, dispatch } = useContext(Context)\n\n    // Just showing the different things someone can do.\n    helpers.setUser(null)\n    helpers.action(actions.SET_USER, { id: 123, name: 'John Doe' })\n    helpers.action(actions.APP_INITIALIZE, true)\n\n    useEffect(() =\u003e {\n        window.console.log('app initialized', state.initialized)\n        window.console.log('user', state.user)\n    }, [state.initialized, state.user])\n    \n    return \u003ch1\u003e{state.user?.name}\u003c/\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericdowell%2Freact-yahl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericdowell%2Freact-yahl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericdowell%2Freact-yahl/lists"}