{"id":20915974,"url":"https://github.com/indico/react-overridable","last_synced_at":"2025-05-13T10:33:52.070Z","repository":{"id":40768734,"uuid":"262989103","full_name":"indico/react-overridable","owner":"indico","description":"React-Overridable","archived":false,"fork":false,"pushed_at":"2023-01-06T05:42:48.000Z","size":124,"stargazers_count":8,"open_issues_count":15,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-11T19:06:07.982Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/indico.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-11T08:52:06.000Z","updated_at":"2022-05-04T18:55:50.000Z","dependencies_parsed_at":"2023-02-05T11:02:18.258Z","dependency_job_id":null,"html_url":"https://github.com/indico/react-overridable","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indico%2Freact-overridable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indico%2Freact-overridable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indico%2Freact-overridable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indico%2Freact-overridable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/indico","download_url":"https://codeload.github.com/indico/react-overridable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225206882,"owners_count":17438200,"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-18T16:19:11.561Z","updated_at":"2024-11-18T16:19:12.280Z","avatar_url":"https://github.com/indico.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["UI"],"readme":"# react-overridable\n\nWith `react-overridable` you can mark your React components as overridable\nand allow other apps to customize them. This can be useful when creating\nlibraries with a default implementation of components which requires to be\noverridden at runtime.\n\nYou can inject new props, override render elements or the component itself.\n\n## Usage\n\nCreate a React component and mark it as overridable:\n\n```js\nimport PropTypes from 'prop-types';\nimport React, {Component} from 'react';\nimport Overridable, {parametrize, OverridableContext} from 'react-overridable';\n\nclass TitleComponent extends Component {\n  static propTypes = {\n    title: PropTypes.string.isRequired,\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  };\n\n  static defaultProps = {\n    children: null,\n  };\n\n  render() {\n    const {title, children} = this.props;\n    return (\n      \u003cOverridable id=\"TitleComponent.container\" title={title}\u003e\n        \u003c\u003e\n          \u003cdiv\u003e{title}\u003c/div\u003e\n          {children}\n        \u003c/\u003e\n      \u003c/Overridable\u003e\n    );\n  }\n}\n\nexport const OverridableExampleComponent = Overridable.component('TitleComponent', TitleComponent);\n```\n\nIn this example, the `TitleComponent` is marked as overridable inside the\n`render` function, via the React component `\u003cOverridable /\u003e` and then exported\nvia the Higher-Order component `Overridable.component`.\nEach overridable component is identified by a unique id.\n\nAfter marking components as overridable, there are 3 ways that you can use to override:\n\n1. **Provide new props with `parametrize`**: define new props to override the default component props.\n```js\nconst parametrized = parametrize(OverridableExampleComponent, {\n  title: 'My new title',\n});\n// create a map {\u003ccomponent id\u003e: \u003cparametrized props\u003e}\nconst overriddenComponents = {TitleComponent: parametrized};\n```\n\n2. **Provide new render elements**: override the default rendered elements for the marked sections.\nProps are passed and can be used in the new template.\n```js\nconst overriddenRenderElement = ({title}) =\u003e (\n  \u003ch1\u003e{title}\u003c/h1\u003e\n);\n// create a map {\u003crender element id\u003e: \u003cnew render elements\u003e}\nconst overriddenComponents = {TitleComponent.container: overriddenRenderElement};\n```\n\n3. **Provide a new component**: you can replace the existing component with a new one.\n```js\nconst NewComponent = () =\u003e \u003cstrong\u003eThis is a new title\u003c/strong\u003e;\n// create a map {\u003ccomponent id\u003e: \u003cnew component\u003e}\nconst overriddenComponents = {TitleComponent: NewComponent};\n```\n\nIn your app, inject the map of ids-components in the React Context\n`OverridableContext` so that the `react-overridable` library can\nuse it and replace components when the default are rendered:\n```js\nclass App extends Component {\n  render() {\n    return (\n      \u003cOverridableContext.Provider value={overriddenComponents}\u003e\n        \u003c....\u003e\n      \u003c/OverridableContext.Provider\u003e\n    )\n  }\n}\n```\n\n## Install\n\nTo install the library, you will have to install the peer dependencies.\n```\nnpm i react-overridable\nnpm i \u003cpeer dependencies\u003e\n```\n\n## Development\n\nTo run tests:\n```\nnpm run test\n```\n\nTo build the library:\n```\nnpm run build\n```\n\n## Note\n\nIn applying the MIT license, CERN does not waive the privileges and immunities\ngranted to it by virtue of its status as an Intergovernmental Organization\nor submit itself to any jurisdiction.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findico%2Freact-overridable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findico%2Freact-overridable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findico%2Freact-overridable/lists"}