Add useScroll utility hook
#9
Conversation
|
Any chance someone could review this? It's a pretty minor addition... |
There was a problem hiding this comment.
Why stores? Couldn't it be as simple as this?
const [scroll, setScroll] = solid.createSignal<mo.Scroll | null>(null)
solid.onMount(() => mo.scroll(setScroll, options))
return scrollI'm not really a fan of using stores in libraries.
I don't mind the utility overall though.
The readme should be updated too, so that people can discover it.
IIRC I tried using just signals originally but couldn't get the reactivity to work. Feel free to play around with it if you would like though.
Sounds good. |
|
The reason I didn't use stores is to allow destructuring like this It's been almost a month, any chance this can be merged soon? I need to use it in prod soon. |
|
I would love to see this merged, currently using a custom hook in my projects that uses signals. export const useScroll = () => {
const [time, setTime] = createSignal<number>(0);
const [scrollX, setScrollX] = createSignal<AxisScrollInfo>(defaultScrollInfo, { equals: false });
const [scrollY, setScrollY] = createSignal<AxisScrollInfo>(defaultScrollInfo, { equals: false });
onMount(() => {
scroll(({ time, x, y }) => {
setTime(time);
setScrollX(x);
setScrollY(y);
});
});
return { time, scrollX, scrollY };
};The reason for the See the solid docs on signals: Feel free to use my implementation. |
| @@ -65,6 +74,44 @@ export function createMotion( | |||
| return state | |||
| } | |||
|
|
|||
| export function useScroll(options?: ScrollOptions): { | |||
| time: Accessor<number> | |||
| scrollX: AxisScrollInfo | |||
There was a problem hiding this comment.
| scrollX: AxisScrollInfo | |
| scrollX: Accessor<AxisScrollInfo> |
| export function useScroll(options?: ScrollOptions): { | ||
| time: Accessor<number> | ||
| scrollX: AxisScrollInfo | ||
| scrollY: AxisScrollInfo |
There was a problem hiding this comment.
| scrollY: AxisScrollInfo | |
| scrollY: Accessor<AxisScrollInfo> |
| scrollY: AxisScrollInfo | ||
| } { | ||
| const [time, setTime] = createSignal(0) | ||
| const [scrollX, setScrollX] = createStore<AxisScrollInfo>({ |
There was a problem hiding this comment.
| const [scrollX, setScrollX] = createStore<AxisScrollInfo>({ | |
| const [scrollX, setScrollX] = createSignal<AxisScrollInfo>({ |
| targetLength: 0, | ||
| containerLength: 0, | ||
| }) | ||
| const [scrollY, setScrollY] = createStore<AxisScrollInfo>({ |
There was a problem hiding this comment.
| const [scrollY, setScrollY] = createStore<AxisScrollInfo>({ | |
| const [scrollY, setScrollY] = createSignal<AxisScrollInfo>({ |
| targetOffset: 0, | ||
| targetLength: 0, | ||
| containerLength: 0, | ||
| }) |
There was a problem hiding this comment.
| }) | |
| }, { equals: false }) |
| targetOffset: 0, | ||
| targetLength: 0, | ||
| containerLength: 0, | ||
| }) |
There was a problem hiding this comment.
| }) | |
| }, { equals: false }) |
|
|
||
| import {PresenceContext, PresenceContextState} from "./presence.jsx" | ||
| import {Options} from "./types.js" | ||
| import {createStore, produce} from "solid-js/store" |
There was a problem hiding this comment.
| import {createStore, produce} from "solid-js/store" |
|
Good to know that the const [store, setStore] = createStore({
time: 0,
x: {...zero_axis},
y: {...zero_axis},
})
onMount(() => {
onCleanup(
scroll(e => {
batch(() => {
setStore('time', e.time)
setStore('x', e.x)
setStore('y', e.y)
})
}, options)
)
})
return storeWriting this made me realize that |
|
Another option what would keep the same api but not require bringing in stores: const [time, set_time] = createSignal(0)
const [x_current, set_x_current] = createSignal(0)
const [y_current, set_y_current] = createSignal(0)
const [x_offset, set_x_offset] = createSignal([])
const [y_offset, set_y_offset] = createSignal([])
const [x_progress, set_x_progress] = createSignal(0)
const [y_progress, set_y_progress] = createSignal(0)
const [x_scrollLength, set_x_scrollLength] = createSignal(0)
const [y_scrollLength, set_y_scrollLength] = createSignal(0)
const [x_velocity, set_x_velocity] = createSignal(0)
const [y_velocity, set_y_velocity] = createSignal(0)
const [x_targetOffset, set_x_targetOffset] = createSignal(0)
const [y_targetOffset, set_y_targetOffset] = createSignal(0)
const [x_targetLength, set_x_targetLength] = createSignal(0)
const [y_targetLength, set_y_targetLength] = createSignal(0)
const [x_containerLength, set_x_containerLength] = createSignal(0)
const [y_containerLength, set_y_containerLength] = createSignal(0)
onMount(() => {
onCleanup(
scroll(e => {
batch(() => {
set_time(e.time)
set_x_current(e.x.current)
set_y_current(e.y.current)
set_x_offset(e.x.offset)
set_y_offset(e.y.offset)
set_x_progress(e.x.progress)
set_y_progress(e.y.progress)
set_x_scrollLength(e.x.scrollLength)
set_y_scrollLength(e.y.scrollLength)
set_x_velocity(e.x.velocity)
set_y_velocity(e.y.velocity)
set_x_targetOffset(e.x.targetOffset)
set_y_targetOffset(e.y.targetOffset)
set_x_targetLength(e.x.targetLength)
set_y_targetLength(e.y.targetLength)
set_x_containerLength(e.x.containerLength)
set_y_containerLength(e.y.containerLength)
})
}, options)
)
})
return {
get time() {return time()},
x: {
get current() {return x_current()},
get offset() {return x_offset()},
get progress() {return x_progress()},
get scrollLength() {return x_scrollLength()},
get velocity() {return x_velocity()},
get targetOffset() {return x_targetOffset()},
get targetLength() {return x_targetLength()},
get containerLength() {return x_containerLength()},
},
y: {
get current() {return y_current()},
get offset() {return y_offset()},
get progress() {return y_progress()},
get scrollLength() {return y_scrollLength()},
get velocity() {return y_velocity()},
get targetOffset() {return y_targetOffset()},
get targetLength() {return y_targetLength()},
get containerLength() {return y_containerLength()},
},
} |
Whatever you think is best honestly, you should have commit access for this PR. I just want to get this merged; let me know if there's anything else I can do. |
This PR just adds
useScrollas a utility function to get reactive updates from motionone's scroll listener. I tested it in browser and reactivity is working.I haven't really contributed to or created any TS/Solid libraries before so I am sure there are some things that might need changing. It would be great if someone more experienced could do a proper review to make sure the code is idiomatic and functional.
Relevant issue: #8