diff --git a/.changeset/lazy-chicken-vanish.md b/.changeset/lazy-chicken-vanish.md new file mode 100644 index 000000000..cff9992f6 --- /dev/null +++ b/.changeset/lazy-chicken-vanish.md @@ -0,0 +1,5 @@ +--- +"vfx": patch +--- + +**New:** `` will give its children the specified lifetime and then unmount them. diff --git a/apps/examples/src/effects/Explosion.tsx b/apps/examples/src/effects/Explosion.tsx index bef94146a..96787376c 100644 --- a/apps/examples/src/effects/Explosion.tsx +++ b/apps/examples/src/effects/Explosion.tsx @@ -2,7 +2,14 @@ import { CameraShake } from "@react-three/drei" import { GroupProps } from "@react-three/fiber" import { between, plusMinus, power } from "randomish" import { Color, MeshStandardMaterial, Vector3 } from "three" -import { Delay, Emitter, MeshParticles, ParticlesMaterial, Repeat } from "vfx" +import { + Delay, + Emitter, + Lifetime, + MeshParticles, + ParticlesMaterial, + Repeat +} from "vfx" const gravity = new Vector3(0, -20, 0) const direction = new Vector3() @@ -145,30 +152,32 @@ const SmokeCloud = () => ( const Explosion = (props: GroupProps) => ( - - - - - - - - - + + + + + + + - + + + + + - + ) diff --git a/packages/vfx/src/utilities/Delay.tsx b/packages/vfx/src/utilities/Delay.tsx index e6698e870..4b7e0c806 100644 --- a/packages/vfx/src/utilities/Delay.tsx +++ b/packages/vfx/src/utilities/Delay.tsx @@ -7,11 +7,7 @@ type DelayProps = { onComplete?: () => void } -export const Delay: FC = ({ - seconds = 0, - onComplete, - children -}) => { +export const Delay: FC = ({ seconds, onComplete, children }) => { const ready = useDelay(seconds, onComplete) return ready ? <>{children} : null } diff --git a/packages/vfx/src/utilities/Lifetime.tsx b/packages/vfx/src/utilities/Lifetime.tsx new file mode 100644 index 000000000..bc44c9336 --- /dev/null +++ b/packages/vfx/src/utilities/Lifetime.tsx @@ -0,0 +1,14 @@ +import { FC } from "react" +import { ReactNode } from "react" +import { useDelay } from "./Delay" + +type LifetimeProps = { + children?: ReactNode + seconds: number +} + +export const Lifetime: FC = ({ children, seconds }) => { + const ready = useDelay(seconds) + + return ready ? null : <>{children} +} diff --git a/packages/vfx/src/utilities/index.ts b/packages/vfx/src/utilities/index.ts index f5bd4a21e..b3a0a7ffd 100644 --- a/packages/vfx/src/utilities/index.ts +++ b/packages/vfx/src/utilities/index.ts @@ -1,2 +1,3 @@ export * from "./Delay" +export * from "./Lifetime" export * from "./Repeat"