From 085792ac14fcea67afad5a163a8145a5ba603ef2 Mon Sep 17 00:00:00 2001
From: Yao Ding <yaodingyd@gmail.com>
Date: Wed, 3 Apr 2024 11:42:09 -0400
Subject: [PATCH] update docs and example to be update to date

---
 README.md | 46 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 2a13d12..7ae2365 100644
--- a/README.md
+++ b/README.md
@@ -33,12 +33,12 @@ const flickityOptions = {
 function Carousel() {
   return (
     <Flickity
-      className={'carousel'} // default ''
-      elementType={'div'} // default 'div'
-      options={flickityOptions} // takes flickity options {}
-      disableImagesLoaded={false} // default false
-      reloadOnUpdate // default false
-      static // default false
+      className={'carousel'}                
+      elementType={'div'}                   
+      options={flickityOptions}
+      disableImagesLoaded
+      reloadOnUpdate
+      static
     >
       <img src="/images/placeholder.png"/>
       <img src="/images/placeholder.png"/>
@@ -50,7 +50,7 @@ function Carousel() {
 ```
 ### Example Usage:
 See a codesandbox example here:
-https://codesandbox.io/s/qlz12m4oj6
+https://codesandbox.io/s/react-flickity-demo-wwszqm
 
 See an example with server side rendering:
 
@@ -67,7 +67,7 @@ https://github.com/theolampert/react-flickity-component-example/tree/typescript
 | -------------------- | -----------| --------|---------------------------------------------------------------|
 | `className`          | `String`   | `''`    | Applied to top level wrapper                                  |
 | `elementType`        | `String`   | `'div'` | Wrapper's element type                                        |
-| `options`            | `Object`   | `{}`    | Flickity initialization opions                                |
+| `options`            | `Object`   | `{}`    | Flickity initialization options                                |
 | `disableImagesLoaded`| `Boolean`  | `false` | Disable call `reloadCells` images are loaded                  |
 | `flickityRef`        | `Function` |         | Like `ref` function, get Flickity instance in parent component|
 | `reloadOnUpdate`     | `Boolean`  | `false` | **Read next section before you set this prop.** Run `reloadCells` and `resize` on `componentDidUpdate`        |                      
@@ -77,9 +77,9 @@ https://github.com/theolampert/react-flickity-component-example/tree/typescript
 
 Under the hood, react-flickity-component uses a [React Portal](https://reactjs.org/docs/portals.html) to render children slides inside a Flickity instance. The need for a portal is because after Flickity is initialized, new DOM nodes (mostly Flickity wrapper elements) would be created, this changes the DOM hierarchy of the parent component, thus any future update, whether it's originated from Flickity, like adding/removing slides, or from parent, like a prop changes, will make React fail to reconcile for the DOM snapshot is out of sync. 
 
-#64 introduced a new prop to change the underlying render method: instead of portal, react-flickity-component will directly render children. This is create a smoother server-side rendering experience, but **please be aware using `static` prop possibly will cause all your future update to fail,** which means adding/removing slides will definitely fail to render, so use with caution.
+[#64](https://github.com/yaodingyd/react-flickity-component/pull/64) introduced a new prop to change the underlying render method: instead of using portal, react-flickity-component will directly render children. This is to create a smoother server-side rendering experience, but **please be aware using `static` prop possibly will cause all your future update to fail,** which means adding/removing slides will definitely fail to render, so use with caution.
 
-However there is a fail-safe option `reloadOnUpdate`. It means every time there is a update, we tear down and set up Flickity. This will ensure that Flickity is always rendered correctly, but it's a rather costly operation and it will cause a flicker since DOM nodes are destroyed and recreated.
+However there is a fail-safe option `reloadOnUpdate`. It means every time there is a update, we tear down and set up Flickity. This will ensure that Flickity is always rendered correctly, but it's a rather costly operation and it **will cause a flicker** since DOM nodes are destroyed and recreated. Please also note it means any update, either rerender of the parent, or any of the props change, will always cause an update in the Flickity component. For more information, see a detailed explanation and workaround in [#147](https://github.com/yaodingyd/react-flickity-component/issues/147).
 
 
 ### Use Flickity's API and events
@@ -87,8 +87,33 @@ However there is a fail-safe option `reloadOnUpdate`. It means every time there
 You can access the Flickity instance with `flickityRef` prop just like `ref`, and use this instance to register events and use API.
 
 ```javascript
+// function component
+function Carousel () {
+  const ref = React.useRef(null);
 
+  function myCustomNext = () {
+    // You can use Flickity API
+    ref.current.next()
+  }
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.on("settle", () => {
+        console.log(`current index is ${ref.current.selectedIndex}`);
+      });
+    }
+  }, []);
 
+  return (
+      <Flickity flickityRef={c => ref.current = c}>
+        <img src="/images/placeholder.png"/>
+        <img src="/images/placeholder.png"/>
+        <img src="/images/placeholder.png"/>
+      </Flickity>
+      <Button onClick={myCustomNext}>My custom next button</Button>
+    )
+}
+// class component
 class Carousel extends React.Component {
 
   componentDidMount = () => {
@@ -114,7 +139,6 @@ class Carousel extends React.Component {
     )
   }
 }
-
 ```