https://github.com/indico/react-overridable
React-Overridable
https://github.com/indico/react-overridable
Last synced: about 1 year ago
JSON representation
React-Overridable
- Host: GitHub
- URL: https://github.com/indico/react-overridable
- Owner: indico
- License: mit
- Created: 2020-05-11T08:52:06.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:42:48.000Z (over 3 years ago)
- Last Synced: 2024-11-11T19:06:07.982Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 121 KB
- Stars: 8
- Watchers: 7
- Forks: 6
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-cern - react-overridable
README
# react-overridable
With `react-overridable` you can mark your React components as overridable
and allow other apps to customize them. This can be useful when creating
libraries with a default implementation of components which requires to be
overridden at runtime.
You can inject new props, override render elements or the component itself.
## Usage
Create a React component and mark it as overridable:
```js
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import Overridable, {parametrize, OverridableContext} from 'react-overridable';
class TitleComponent extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
};
static defaultProps = {
children: null,
};
render() {
const {title, children} = this.props;
return (
<>
{title}
{children}
>
);
}
}
export const OverridableExampleComponent = Overridable.component('TitleComponent', TitleComponent);
```
In this example, the `TitleComponent` is marked as overridable inside the
`render` function, via the React component `` and then exported
via the Higher-Order component `Overridable.component`.
Each overridable component is identified by a unique id.
After marking components as overridable, there are 3 ways that you can use to override:
1. **Provide new props with `parametrize`**: define new props to override the default component props.
```js
const parametrized = parametrize(OverridableExampleComponent, {
title: 'My new title',
});
// create a map {: }
const overriddenComponents = {TitleComponent: parametrized};
```
2. **Provide new render elements**: override the default rendered elements for the marked sections.
Props are passed and can be used in the new template.
```js
const overriddenRenderElement = ({title}) => (
{title}
);
// create a map {: }
const overriddenComponents = {TitleComponent.container: overriddenRenderElement};
```
3. **Provide a new component**: you can replace the existing component with a new one.
```js
const NewComponent = () => This is a new title;
// create a map {: }
const overriddenComponents = {TitleComponent: NewComponent};
```
In your app, inject the map of ids-components in the React Context
`OverridableContext` so that the `react-overridable` library can
use it and replace components when the default are rendered:
```js
class App extends Component {
render() {
return (
<....>
)
}
}
```
## Install
To install the library, you will have to install the peer dependencies.
```
npm i react-overridable
npm i
```
## Development
To run tests:
```
npm run test
```
To build the library:
```
npm run build
```
## Note
In applying the MIT license, CERN does not waive the privileges and immunities
granted to it by virtue of its status as an Intergovernmental Organization
or submit itself to any jurisdiction.