feat: add SwitchTransition, update docs

iamyoki · Dec 23, 2021 · 18b08e9 · 18b08e9
1 parent 2e7039d
commit 18b08e9
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -48,10 +48,12 @@
   - [useTransition](#usetransition)
   - [useSwitchTransition](#useswitchtransition)
   - [Transition](#transition)
+  - [SwitchTransition](#switchtransition)
 - [API Reference](#api-reference)
   - [useTransition(state, timeout)](#usetransitionstate-timeout)
   - [useSwitchTransition(state, timeout, mode)](#useswitchtransitionstate-timeout-mode)
   - [Transition](#transition-1)
+  - [SwitchTransition](#switchtransition-1)
 - [License](#license)
 
 ## Installation
@@ -137,6 +139,29 @@ return <div>
 </div>
 ```
 
+### SwitchTransition
+
+FaCC pattern version of useSwitchTransition
+
+```jsx
+  <SwitchTransition state={count} timeout={300} mode='default'>
+    {(state, stage) => (
+      <h1
+        style={{
+          transition: '.3s',
+          opacity: stage === 'enter' ? 1 : 0,
+          transform: {
+            from: 'translateX(-100%) scale(1.2)',
+            enter: 'translateX(0)',
+            leave: 'translateX(100%) scale(0)'
+          }[stage]
+        }}>
+        {state} {stage} hello
+      </h1>
+    )}
+  </SwitchTransition>
+```
+
 ## API Reference
 
 ### useTransition(state, timeout)
@@ -163,17 +188,17 @@ return <div>
   const transition = useSwitchTransition(onOff, 300, 'default')
 ```
 
-| Parameters | Type                               | Description                                                   |
-| :--------- | :--------------------------------- | :------------------------------------------------------------ |
-| `state`    | `any`                              | **Required**. Your state, which triggers animation            |
-| `timeout`  | `number`                           | **Required**. How long before the animation ends and unmounts |
-| `mode`     | `default` \| `out-in` \| `int-out` | **Optional**. Default to `default` mode                       |
+| Parameters | Type                              | Description                                                   |
+| :--------- | :-------------------------------- | :------------------------------------------------------------ |
+| `state`    | `any`                             | **Required**. Your state, which triggers animation            |
+| `timeout`  | `number`                          | **Required**. How long before the animation ends and unmounts |
+| `mode`     | `default` \| `out-in` \| `in-out` | **Optional**. Default to `default` mode                       |
 
 ### Transition
 
 ```jsx
   <Transition state={onOff} timeout={300}>
-    {(stage, shouldMount) => shouldMount && <div style={...}>hello</div>}
+    {(stage, shouldMount) => shouldMount && <div style={{...}}>hello</div>}
   </Transition>
 ```
 
@@ -183,6 +208,21 @@ return <div>
 | `timeout`  | `number`                                                | **Required**. How long before the animation ends and unmounts         |
 | `children` | `(stage: Stage, shouldMount: boolean)=>React.ReactNode` | **Required**. FaCC pattern.                                           |
 
+### SwitchTransition
+
+```jsx
+  <SwitchTransition state={count} timeout={300}>
+    {(state, stage) => <div style={{...}}>{state} hello</div>}
+  </SwitchTransition>
+```
+
+| Props      | Type                                          | Description                                                           |
+| :--------- | :-------------------------------------------- | :-------------------------------------------------------------------- |
+| `state`    | `any`                                         | **Required**. Your boolean state, which controls animation in and out |
+| `timeout`  | `number`                                      | **Required**. How long before the animation ends and unmounts         |
+| `mode`     | `default` \| `out-in` \| `in-out`             | **Optional**. Default to `default` mode                               |
+| `children` | `(state: any, stage: Stage)=>React.ReactNode` | **Required**. FaCC pattern.                                           |
+
 ## License
 
 [MIT](https://choosealicense.com/licenses/mit/)
diff --git a/src/SwitchTransition/index.tsx b/src/SwitchTransition/index.tsx
@@ -0,0 +1,20 @@
+import {Stage, useSwitchTransition} from '..';
+import {Mode} from '../useSwitchTransition/types';
+
+type SwitchTransitionProps<S = any> = {
+  state: S;
+  timeout: number;
+  mode: Mode;
+  children: (state: S, stage: Stage) => React.ReactNode;
+};
+
+export function SwitchTransition<S>({
+  state,
+  timeout,
+  mode,
+  children,
+}: SwitchTransitionProps<S>) {
+  const transition = useSwitchTransition(state, timeout, mode);
+
+  return transition(children);
+}
diff --git a/src/Transition/index.tsx b/src/Transition/index.tsx
@@ -1,4 +1,4 @@
-import {Stage, useTransition} from '../useTransition';
+import {Stage, useTransition} from '..';
 
 type TransitionProps = {
   state: boolean;

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,4 @@
 export * from './useTransition';
 export * from './useSwitchTransition';
 export * from './Transition';
+export * from './SwitchTransition';