reACTLogic is a library of React's components logic which is based on the modern and cool React approach - hooks!
Since React Hooks brings us an easy and maintainlable way to share and reuse component's logic between the entirely app it became clear that custom hooks are the future of React. This library is a truly concept of "create once, use everywhere"!
npm install reactlogic-hooks-library
This documentation with additional code snippets is also available here
Returns boolean value from checkbox input.
const input = useCheckbox()
input[0]: boolean
input[1]: function: e => setValue(e.target.checked)
}
Returns provided value as string.
const input = useInput()
input[0]: string
input[1]: function: e => setValue(e.target.value)
}
Type: RefObject<HTMLElement>
Default: window
A React ref element of which scroll event will be measured.
Type: Boolean
If true then scroll event will use debounce function as delay, otherwise throttle function will be set. If this option is ommited, throttle is set as default.
Type: number
Default: 0 ms
A number of milliseconds for delay function.
const scroll = useScroll({
element?: ReactRefElement,
throttleTime?: number(ms),
targetElement?: ReactRefElement
})
scroll.x: number
scroll.y: number
scroll.isTop: boolean
scroll.isBottom: boolean
scroll.isTargetReached: boolean
Type: Array<string | number | object>
An array of data that will be filtered for a match.
Type: string | number
A string or number to be searched for.
Type: string<keyof data>
When input data is an array of objects, you have to specify which property include to search for. It should be string which is key of specified data objects.
Type: boolean
An addition property which distinguish queries by case sensitive. Default value is set to true.
const search = useSearch({
data: array,
search: string,
type: string
})
search.value: array
Type: number
A number of slider length.
Type: number
Default: 2000 ms
A number of miliseconds between each slide change.
const slider = useSlider(changeSpeed?: number(ms), indexLimit: number)
slider.isPlaying: boolean
slider.setPlaying: function: (boolean) => isPlaying
slider.togglePlaying: function: () => !isPlaying
slider.nextSlide: function: () => index + 1
slider.prevSlide: function: () => index - 1
slider.index: number
Type: RefObject<HTMLElement>
Default: window
A React ref element of which rect is counted. Properties describing the overall border-box in pixels. Properties other than width and height are relative to the top-left o the viewport. More info here.
const rect = useRect(divRef: ReactRefElement)
rect.width: number
rect.height: number
rec.top: number
rect.bottom: number
rect.right: number
rect.left: number
 Paweł Pęczkowski 🚇 |