diff --git a/README.md b/README.md index ea95764..b6c3b22 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
-
Explicitly inject Elements to any part of your React render tree
+Explicitly inject Components to any part of your React render tree
[![Travis](https://img.shields.io/travis/ctrlplusb/react-injectables.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/react-injectables) @@ -9,15 +9,11 @@ [![Codecov](https://img.shields.io/codecov/c/github/ctrlplusb/react-injectables.svg?style=flat-square)](https://codecov.io/github/ctrlplusb/react-injectables) [![Maintenance](https://img.shields.io/maintenance/yes/2016.svg?style=flat-square)]() -Tiny, and the only dependency is a peer dependency of React. - -### Warning - -I am actively developing this project whilst applying it to a production use-case. This is exposing the limitations of the API pretty fast requiring that I do quick updates. Expect the versions to bump excessively over the next couple of weeks, but I will stabilise it as quickly as I can. I'm not a fan of 0.x.x beta releases and don't mind big numbers. I like that each version I release clearly indicates breaking changes. This message will disappear as soon as I believe the API will remain stable for an extended period of time. +This is a teeny tiny React library - it's almost unnoticable when gzipped. ## What is this for? -Placeholders, Modals, etc etc. +Placeholders, Modals, etc. ## Overview @@ -44,26 +40,34 @@ One option would be to use react-routers native capability to pass down multiple Enter Injectables. -Injectables aims to provide you with a mechanism to explicity define an Injectable target and Injector source component(s). +Injectables aims to provide you with a mechanism to explicity define `Injectable` and `Injector` Components. An `Injector` produces a Component that gets injected into an `Injectable`. -With Injectables you can easily inject into `Sidebar` from your `ProductPage` doing something similar to the following: +With Injectables you can easily inject a Component into the `Sidebar` when your `ProductPage` Component gets mounted. Here is a partial example of this: ```javascript -import { Injector } from 'react-injectables'; +const MyBasketSidebarInjection = Injector({ + into: InjectableSidebar +})(MyBasket) class ProductsPage extends Component { ... + + render() { + return ( +I am page one.
-My State is {active ? `active` : `inactive`}
-Injection from Page One
The active prop value is: {active ? `active` : `inactive`}
I am page one.
+My State is {active ? `active` : `inactive`}
+