Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blackboxvision/react-slot-fill
🎉 Slot and Fill implementation for React 16. Portals on Steroids 💪
https://github.com/blackboxvision/react-slot-fill
context fill library provider react slot
Last synced: 24 days ago
JSON representation
🎉 Slot and Fill implementation for React 16. Portals on Steroids 💪
- Host: GitHub
- URL: https://github.com/blackboxvision/react-slot-fill
- Owner: BlackBoxVision
- License: mit
- Created: 2018-08-28T13:57:13.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:39:54.000Z (almost 2 years ago)
- Last Synced: 2024-09-23T07:38:17.703Z (about 2 months ago)
- Topics: context, fill, library, provider, react, slot
- Language: TypeScript
- Homepage: https://BlackBoxVision.github.io/react-slot-fill/
- Size: 5.3 MB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Slot and Fill [](https://badge.fury.io/js/%40blackbox-vision%2Freact-slot-fill) [](https://opensource.org/licenses/MIT) [](https://snyk.io/test/github/blackboxvision/react-slot-fill)
:rocket: React Slot and Fill pattern implementation made with React.createContext API. Check out the [demo](https://blackboxvision.github.io/react-slot-fill/).
## Install
You can install this library via NPM or YARN.
### NPM
```bash
npm i @blackbox-vision/react-slot-fill
```
### YARN
```bash
yarn add @blackbox-vision/react-slot-fill
```
## Use case
If you need to render a component from somepart of the DOM tree, but it needs to be visible in another part of the tree, this library solves it.
This library is very similar to [`react-slot-fill`](https://github.com/camwest/react-slot-fill), but we solve two particular issues:
- Support for `React.createContext`, this library is intended to use with React >= 16.3.1.
- If a `Fill` is declared after a `Slot`, it can render properly, which [`react-slot-fill`](https://github.com/camwest/react-slot-fill) doesn't support.
## Usage
The usage is really simple:
```javascript
// Toolbar.js
import React from 'react';
import { Slot, Fill } from '@blackbox-vision/react-slot-fill';
const Toolbar = (props) => (
);
export default Toolbar;
Toolbar.Item = (props) => (
{props.label}
);
```
```javascript
// Feature.js
import React from 'react';
import Toolbar from './Toolbar';
const Feature = () => ;
```
```javascript
// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from '@blackbox-vision/react-slot-fill';
import Toolbar from './Toolbar';
import Feature from './Feature';
const App = () => (
);
ReactDOM.render(, document.getElementById('root'));
```
## Props
`Slot` and `Fill` components use the same props, which are the following ones:
| Properties | Types | Default Value | Description |
| ---------- | ------- | ------------- | ----------------------------------------------- |
| name | string | none | Determines the name of the Slot/Fill. |
| debug | boolean | false | Enable logging to detect issues with Slot/Fill. |
## TODO
- [x] Support for passing props from Fill to Slot.
- [ ] Support for multiple Fill for one Slot.
## Issues
Please, open an [issue](https://github.com/BlackBoxVision/react-slot-fill/issues) following one of the issues templates. We will do our best to fix them.
## Contributing
If you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-slot-fill/blob/master/CONTRIBUTING.md) for more information.
## License
Distributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-slot-fill/blob/master/LICENSE) for more information.