rynex
Version:
A minimalist TypeScript framework for building reactive web applications with no virtual DOM
62 lines • 1.38 kB
JavaScript
/**
* Rynex Refs and DOM Access
* Reference management for DOM elements
*/
/**
* Create a ref object
* Used to hold reference to DOM element
*/
export function ref(initialValue = null) {
return {
current: initialValue
};
}
/**
* Use ref hook
* Creates and returns a ref object
*/
export function useRef(initialValue = null) {
return ref(initialValue);
}
/**
* Forward ref to child component
* Allows parent to access child's DOM element
*/
export function forwardRef(component) {
return (props) => {
const internalRef = props.ref || ref();
const element = component(props, internalRef);
if (internalRef) {
internalRef.current = element;
}
return element;
};
}
/**
* Create callback ref
* Executes callback when ref is set
*/
export function callbackRef(callback) {
return (element) => {
callback(element);
};
}
/**
* Merge multiple refs into one
* Useful when you need to forward ref and use it internally
*/
export function mergeRefs(...refs) {
return (element) => {
refs.forEach(ref => {
if (!ref)
return;
if (typeof ref === 'function') {
ref(element);
}
else {
ref.current = element;
}
});
};
}
//# sourceMappingURL=refs.js.map