{"id":21487156,"url":"https://github.com/dtinth/enable-hot-reload","last_synced_at":"2025-07-11T18:03:27.833Z","repository":{"id":27895432,"uuid":"115493986","full_name":"dtinth/enable-hot-reload","owner":"dtinth","description":"Library to generate make React components hot-reloadable. Compatible with `create-react-app`.","archived":false,"fork":false,"pushed_at":"2022-12-07T18:41:47.000Z","size":484,"stargazers_count":4,"open_issues_count":28,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-09T05:50:01.147Z","etag":null,"topics":["create-react-app","hot-module-replacement","react"],"latest_commit_sha":null,"homepage":"","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/dtinth.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":"2017-12-27T07:24:06.000Z","updated_at":"2021-09-16T07:36:41.000Z","dependencies_parsed_at":"2022-08-07T13:01:19.226Z","dependency_job_id":null,"html_url":"https://github.com/dtinth/enable-hot-reload","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fenable-hot-reload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fenable-hot-reload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fenable-hot-reload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fenable-hot-reload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dtinth","download_url":"https://codeload.github.com/dtinth/enable-hot-reload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226047664,"owners_count":17565380,"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":["create-react-app","hot-module-replacement","react"],"created_at":"2024-11-23T13:26:58.090Z","updated_at":"2024-11-23T13:26:58.593Z","avatar_url":"https://github.com/dtinth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# enable-hot-reload\n\n**Library to generate make React components hot-reloadable. Compatible with `create-react-app`.**\n\nThis library is a simple wrapper around webpack’s HMR API\nto make it easier to create hot-reloadable React components.\n**No loader or Babel transform plugins needed.**\nThe goal of this library is to be as simple and without magic as possible (the [source code](src/enable-hot-reload.js) is less than 200 lines).\n\n**This library should be used *strategically* in components where hot-reloading would be very beneficial.** Don’t go overboard and enable hot reload on every component!\n\n\n## Installation\n\n```\nyarn add enable-hot-reload\n```\n\n\n## Usage\n\nFirst, put this into the module you want to opt in to hot module replacement:\n\n```js\nimport enableHotReload from 'enable-hot-reload'\nconst hot = enableHotReload(module)\n```\n\nUse `hot(React, Component[, name])` to generate a hot-reloadable wrapper.\n\n  - If your module exports a single component:\n\n    ```js\n    class App extends React.Component { /* ... */ }\n    export default hot(React, App)\n    ```\n\n  - If your module exports multiple components:\n\n    ```js\n    function _Button () { /* ... */ }\n    export const Button = hot(React, _Button, 'Button')\n\n    function _Icon () { /* ... */ }\n    export const Icon = hot(React, _Icon, 'Icon')\n\n    class _Layout extends React.Component { /* ... */ }\n    export const Layout = hot(React, _Layout, 'Layout')\n    ```\n\n`hot(React, Component[, name])` returns a **wrapper component class.**\nUse `.WrappedComponent` to access the wrapped component class.\n\n\n## API\n\n### hot = enableHotReload(module)\n\n**Sets the module up for hot-reloading** and returns the `hot()` API.\n\n\n### hot(React, Component[, name = 'default']) \u0026rarr; ComponentWrapper\n\n**Generates a hot-reloadable wrapper for a React component.**\n\n- `React` The React library.\n- `Component` The component to wrap.\n- `name` The unique name of the component. This allows `enable-hot-reload` to keep track of which components to update\n\nReturns a `ComponentWrapper`, a React component that wraps your component with the ability to hot-reload.\n\nWhen the module is updated and this function is called with a the new component,\nthe wrapper will replace all instances of the old component with the new one.\n\nNotes:\n\n  - **Component state is not preserved.**\n    The old component will be unmounted, and the new component will be mounted in its place.\n\n      - Workaround:\n        If you wish to do state-preserving hot-reloads,\n        extract the rendering logic into a stateless presentational component,\n        and make that component hot-reloadable instead.\n\n  - **refs are not supported.**\n    Again, this library should be used *strategically*.\n    In most cases, you shouldn’t have to hot-reload a component that you need to `ref` it.\n\n      - Workaround:\n        If you insist of having a ref-able hot-reloadable component,\n        create a hot-reloadable wrapper that passes `innerRef` props instead:\n\n        ```js\n        class TheComponentYouNeedToRef extends React.Component { /* ... */ }\n\n        export default hot(React, ({ innerRef, ...props }) =\u003e {\n          return \u003cTheComponentYouNeedToRef {...props} ref={innerRef} /\u003e\n        })\n        ```\n\n  - **Optimization: Stateless components will be updated in-place** without remounting. Exception: if the stateless component makes use of React context, it will be remounted.\n\n\n### ComponentWrapper.WrappedComponent\n\n**Use this to access the wrapped component class.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2Fenable-hot-reload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtinth%2Fenable-hot-reload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2Fenable-hot-reload/lists"}