From b04ab9d6142059649f106c0d738d919f37cccc50 Mon Sep 17 00:00:00 2001
From: Kostiantyn Palchyk <kosich@users.noreply.github.com>
Date: Fri, 7 Aug 2020 23:10:16 +0300
Subject: [PATCH] updated readme, added changelog

---
 CHANGELOG.md | 14 ++++++++++++
 README.md    | 60 ++++++++++++++++++++++++++++++++++------------------
 2 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..8957078
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,14 @@
+# Changelog
+
+## [0.0.3] - 2020-08-07
+### Added
+- createElement$ constructor for dynamic elements
+- a bunch of prefab elements
+
+## [0.0.2]
+### Added
+- error handling
+
+## [0.0.1]
+### Added
+- $ dynamic fragment
\ No newline at end of file
diff --git a/README.md b/README.md
index 69ef10b..b1e1c96 100755
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
     <br/>
     &lt;$&gt;
     <br/>
-    <sub><sub>react fragment for RxJS content</sub></sub>
+    <sub><sub>react elements for RxJS content</sub></sub>
     <br/>
     <br/>
     <a href="https://www.npmjs.com/package/react-rxjs-elements"><img src="https://img.shields.io/npm/v/react-rxjs-elements" alt="NPM"></a>
@@ -25,7 +25,13 @@ Simply add an Observable as one of `<$>`'s children:
 <$>{ stream$ }</$>
 ```
 
-`<$>` will subscribe to the `stream$` and will display it's updates in place.    
+or use a dynamic element, like $img
+
+```tsx
+<$img src={ stream$ } />
+```
+
+`react-rxjs-elements` will subscribe to the `stream$` and will display it's updates in place.    
 And it will clean up all subscriptions for you on component unmount.
 
 Try it [**online**](https://stackblitz.com/edit/react-rxjs-elements?file=index.tsx)
@@ -38,55 +44,68 @@ npm i react-rxjs-elements
 
 ## 📖 Examples
 
-A simple timer
+A simple timer — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-timer?file=index.tsx)
 
 ```tsx
 import React from 'react';
 import { timer } from 'rxjs';
 import { $ } from 'react-rxjs-elements';
 
-function App(){
+function App() {
   return <$>{ timer(0, 1000) } sec</$>
 }
 ```
 
-[online sandbox](https://stackblitz.com/edit/react-rxjs-elements-timer?file=index.tsx)
+---
+
+Dynamic image sources — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-img?file=index.tsx)
+
+```tsx
+import React from 'react';
+import { timer } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { $img } from 'react-rxjs-elements';
+
+function App() {
+  const src$ = timer(0, 3000).pipe(
+    map(x => (x % 2) ? 'a.jpg' : 'b.jpg')
+  );
+
+  return <$img src={ src$ } />
+}
+```
 
 ---
 
-A data fetch (with RxJS [fromFetch](https://rxjs.dev/api/fetch/fromFetch))
+A data fetch (with RxJS [ajax](https://rxjs.dev/api/ajax/ajax)) — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-fetch?file=index.tsx)
 
 ```tsx
 import React, { useMemo } from "react";
 import { map, switchMap } from "rxjs/operators";
-import { fromFetch } from "rxjs/fetch";
+import { ajax } from "rxjs/ajax";
 import { $ } from "react-rxjs-elements";
 
+
 function App() {
   const data$ = useMemo(() =>
-    fromFetch(URL).pipe(
-      switchMap(response => response.json()),
-      map(data => data.description)
-    )
+    ajax.getJSON(URL)
   , []);
 
-  return <$>{ data$ }</$>
+  return <$>{data$}</$>;
 }
 ```
 
-[online sandbox](https://stackblitz.com/edit/react-rxjs-elements-fetch?file=index.tsx)
-
 ---
 
-A counter
+A counter — [online sandbox](https://stackblitz.com/edit/react-rxjs-elements-counter?file=index.tsx)
 
 ```tsx
 import React from 'react';
-import { $ } from 'react-rxjs-elements';
+import { $div } from 'react-rxjs-elements';
 import { Subject } from 'rxjs';
 import { startWith, scan } from 'rxjs/operators';
 
-function App (){
+function App() {
   const subject$ = useMemo(() => new Subject(), []);
 
   const output$ = useMemo(() =>
@@ -96,20 +115,19 @@ function App (){
     )
   , []);
 
-  return <div>
+  return <$div>
     <button onClick={()=>subject$.next(-1)}>
       -
     </button>
     
-    <$>{ output$ }</$>
+    { output$  /* results would be displayed in place */ }
   
     <button onClick={()=>subject$.next(+1)}>
       +
     </button>
-  </div>
+  </$div>
 }
 ```
 
-[online sandbox](https://stackblitz.com/edit/react-rxjs-elements-counter?file=index.tsx)
 
 ## 🙂 Enjoy