{"id":17481207,"url":"https://github.com/paratron/hook-creator","last_synced_at":"2025-09-15T08:43:44.583Z","repository":{"id":57266514,"uuid":"242503524","full_name":"Paratron/hook-creator","owner":"Paratron","description":"Create react data hooks for async operations and even push data","archived":false,"fork":false,"pushed_at":"2020-03-23T22:13:55.000Z","size":31,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-19T01:18:37.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Paratron.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":"2020-02-23T11:20:38.000Z","updated_at":"2022-11-26T07:21:21.000Z","dependencies_parsed_at":"2022-08-25T03:41:05.943Z","dependency_job_id":null,"html_url":"https://github.com/Paratron/hook-creator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fhook-creator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fhook-creator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fhook-creator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fhook-creator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Paratron","download_url":"https://codeload.github.com/Paratron/hook-creator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246034299,"owners_count":20712857,"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-10-18T22:08:55.175Z","updated_at":"2025-03-28T13:11:29.828Z","avatar_url":"https://github.com/Paratron.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hook Creator\nThis module helps creating react hooks for your application. The hooks can return any type of data and\ncan work with any type of arguments. The module helps you in processing and updating the return values\nof your hooks.\n\n### Example usage\n```jsx harmony\nimport {createHook} from 'hook-creator';\n\n/**\n * The first argument needs to be the name of the hook - this is for debugging reasons.\n * The second argument is a curried function. The outer function body receives an update function\n * directly passed from the hook creator module. The second function is your actual hook function.\n * It has all arguments you want to actually pass in your react components.\n */\nconst [useUsername] = createHook('useUsername', (updateHook) =\u003e (userId) =\u003e {\n    // This is the fetch function. It computes the data, the hook should return.\n    switch(userId){\n        case 'a':\n            return 'Peter Pan';\n        case 'b':\n            return 'Captain Hook';\n        case 'c':\n            return 'Mr. Smee'\n    }\n});\n```\n\nAnd here is a component that implements the hook:\n\n```jsx harmony\nconst UserLabel = ({id}) =\u003e {\n    const username = useUsername(id);\n    return \u003cdiv className=\"username\"\u003eThe username is: {username}\u003c/div\u003e;\n\n};\n```\n\nNow, an app could use the component like this:\n```jsx harmony\nconst App = () =\u003e {\n    \u003cdiv className=\"app\"\u003e\n        \u003cUserLabel id=\"a\" /\u003e\n        \u003cUserLabel id=\"b\" /\u003e\n        \u003cUserLabel id=\"c\" /\u003e\n    \u003c/div\u003e\n}\n```\n\nWhich results in this output:\n\n```html\n\u003cdiv className=\"app\"\u003e\n    \u003cdiv className=\"username\"\u003eThe username is: Peter Pan\u003c/div\u003e;\n    \u003cdiv className=\"username\"\u003eThe username is: Captain Hook\u003c/div\u003e;\n    \u003cdiv className=\"username\"\u003eThe username is: Mr. Smee\u003c/div\u003e;\n\u003c/div\u003e\n```\n\n### Actual real world usage\nThe above example is simple, but pointless. The real power of this module is\nthe ability to to trigger component updates, when the return data of the hook changes.\n\nLets re-create the above username hook but this time, we fetch the user name from\nan API:\n\n```jsx harmony\nlet cache = {};\n\nconst [useUsername] = createHook('useUsername', (updateHook) =\u003e (id) =\u003e {\n    // This is because we just want to trigger _one_ network request for each user id.\n    if(cache[id]){\n        return cache[id];\n    }\n\n    cache[id] = [null, {loading: true}];\n    \n    fetch(`/users/${id}`).then(result =\u003e {\n        cache[id] = [result.username, {loading: false}];\n        // Update all hooks, that use this id.\n        updateHook((currentId) =\u003e currentId === id);    \n    });\n\n    return cache[id];\n});\n``` \n\nThis time, the hook will return two values. First, the username and second an status\nobject that tells the using component if the username has already been loaded, or not.\n\nIf the first call to the hook happens, creates a new cache object and triggers a GET request\nto the API. As soon as the request is being answered, the new values is written to the cache\nand an update for the hook is requested. The filter function makes sure that only hooks\nwith the current player id are being updated.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparatron%2Fhook-creator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparatron%2Fhook-creator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparatron%2Fhook-creator/lists"}