diff --git a/README.md b/README.md index a36987e..ef19001 100644 --- a/README.md +++ b/README.md @@ -225,24 +225,6 @@ type GuardProps = { `fallback` is the fallback that will be displayed when the condition is Falsy. -simple Example - -```tsx - 0.5} - onRestrict=() => { - router.replace('/home') - }} - > - { - router.push(`/guard?${controller.createStep("c")}`); - }} - step="b" - /> - -``` - ## useFunnel For App Router ```tsx @@ -289,7 +271,110 @@ createStep(step:string , options:{ For deleteQueryParams, enter the key value of queryParams you want to delete. qsOptions uses StringifyBaseOptions from the qs library. -# Nested Funnel Example +# Examples + +## Default Step Example + +```tsx +useEffect(() => { + if (controller.step === undefined) { + router.replace(`/default-step?${controller.createStep("a")}`); + } +}, []); +``` + +To hide detail and increase cohesion, you may need to specify which step your funnel should start with by default. + +In that case, use useEffect to move to the desired step when the current step is invalid. + +## Guard Example + +```tsx + 0.5} + onRestrict={() => { + router.replace("/home"); + }} +> + { + router.push(`/guard?${controller.createStep("c")}`); + }} + step="b" + /> + +``` + +If you pass a boolean to `condition`, children will be rendered when the condition is true, and if it is false, a `fallback` will be rendered and the `onRestirct` event will occur. + +```tsx + { + if (Math.random() > 0.5) { + return true; + } + await new Promise((res) => setTimeout(res, 1000)); + return false; + }} + onRestrict={() => { + router.replace("/home"); + }} +> + { + router.push(`/guard?${controller.createStep("c")}`); + }} + step="b" + /> + +``` + +By passing a promise or async function to `condition`, you can delay execution of the onRestrict function until the promise is completed. + +```tsx + { + if (Math.random() > 0.5) { + return { + type: "A", + condition: false, + }; + } + if (Math.random() > 0.5) { + return { + type: "B", + condition: false, + }; + } + return { + type: "", + condition: true, + }; + }} + conditionBy={({ condition }) => condition} + onRestrict={({ type }) => { + if (type === "A") { + router.replace("/a"); + } + if (type === "B") { + router.replace("/b"); + } + }} +> + { + router.push(`/guard?${controller.createStep("c")}`); + }} + step="b" + /> + +``` + +`condition` can return other values ​​instead of Boolean. If you didn't return a boolean instead, You need to convert the value to boolean via `conditionBy`. + +Because the return value of `condition` is passed to `onRestrict` and `conditionBy`, inaccessibility processing can be performed in various ways. + +## Nested Funnel Example ```tsx export const aFunnelOptions = () => @@ -374,6 +459,10 @@ export const NestedFunnel = () => { }; ``` +When implementing nested funnels, there are times when you may want to intentionally not represent a specific funnel. + +In that case, use createStep's deleteQueryParams to remove the Funnel from the screen. + # Get More Example [App Router Example](https://github.com/XionWCFM/funnel/tree/main/apps/app-router-example)