react-outlet
Advanced tools
Comparing version
{ | ||
"name": "react-outlet", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "Transclusion helpers for React.js", | ||
@@ -34,4 +34,4 @@ "main": "index.js", | ||
}, | ||
"dependencies": { | ||
"react": "^0.12.2" | ||
"peerDependencies": { | ||
"react": "0.x" | ||
}, | ||
@@ -38,0 +38,0 @@ "jest": { |
@@ -9,2 +9,22 @@ # Transclusion helpers for React.js | ||
React-Outlet provides two components which aid in cross-component transclusion | ||
for React.js, namely an Outlet and Plug component. | ||
Outlets are tied to Plugs via an outletId property. There is a 1-1 relationship | ||
between an Outlet and Plug. | ||
An example use-case is a parent page which contains two panels. One panel displays a | ||
child component while the other panel contains a couple of other components. | ||
Perhaps the parent wants to give the child component the ability to render an | ||
additional component in the side panel. Rather than pushing down the entire | ||
layout into the child (and potentially duplicating a ton of code between | ||
multiple children), with React-Outlet the parent can simply pass an outletId to | ||
the child. The child can then render arbitrary content into the parent's panel | ||
without loosing control (or causing additional renders). | ||
All of this is done within the React lifecycle and is not async. | ||
This same pattern can be used to build other complex components such as Modals | ||
or Tooltips. | ||
## Usage Example | ||
@@ -49,1 +69,37 @@ | ||
``` | ||
## Component API | ||
``` | ||
Static Methods: | ||
Outlet.new_outlet_id() | ||
Generate and return a new outlet id. Should be passed into Outlet and Plug | ||
components as the outletId prop. | ||
Components: | ||
<Outlet outletId={ outlet_id } /> | ||
Render an outlet somewhere in the React component tree. By default this | ||
will render into an empty <div />. Any props other than outletId will be | ||
passed to the underlying <div /> so the outlet is easily classable. | ||
The outletId prop ties this Outlet to a Plug. | ||
<Plug outletId={ outlet_id }>{ ... children go here ... }</Plug> | ||
When a plug has children the children will appear in the associated Outlet | ||
(associated means the outlet has the same outletId as this plug). You can | ||
still use all of the normal React features such as event listeners and so on | ||
on the Plug's children. | ||
``` | ||
## Related work in the React.js community | ||
I want to give a shout out to Joe Critchley (@joecritchley) who had some great ideas for various outlet/portal implementations. Here are some links to his various implementations: | ||
* with-outlets.js (https://gist.github.com/joecritch/8755865) | ||
* A great example of how to give a parent component more fine-grained control of a components children. | ||
* Better component transclusion (http://joecritchley.svbtle.com/transclusion-in-react) | ||
* A blog post about something similar to with-outlets.js | ||
* "Portals" in React.js (http://joecritchley.svbtle.com/portals-in-reactjs) | ||
* An implementation of outlets similar to React-Outlet which uses DOM injection to transfer children around. |
Sorry, the diff of this file is not supported yet
20594
22.88%12
20%104
116.67%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
- Removed