reACTLogic is a library of React's components logic which is based on the modern and cool React approach - hooks!
Table of contents
Motivation
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"!
Installation
npm install reactlogic-hooks-library
API
This documentation with additional code snippets is also available here
useCheckbox
Returns boolean value from checkbox input.
Usage
const input = useCheckbox()
input[0]: boolean
input[1]: function: e => setValue(e.target.checked)
}
useInput
Returns provided value as string.
Usage
const input = useInput()
input[0]: string
input[1]: function: e => setValue(e.target.value)
}
useScroll({element?, debounce?, delayTime?, targetElement?})
element
Type: RefObject<HTMLElement>
Default: window
A React ref element of which scroll event will be measured.
debounce
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.
delayTime
Type: number
Default: 0 ms
A number of milliseconds for delay function.
Usage
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
useSearch({data, search, type?, caseSensitive?})
data
Type: Array<string | number | object>
An array of data that will be filtered for a match.
search
Type: string | number
A string or number to be searched for.
type
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.
caseSensitive
Type: boolean
An addition property which distinguish queries by case sensitive. Default value is set to true.
Usage
const search = useSearch({
data: array,
search: string,
type: string
})
search.value: array
useSlider(indexLimit, changeSpeed?)
indexLimit
Type: number
A number of slider length.
changeSpeed
Type: number
Default: 2000 ms
A number of miliseconds between each slide change.
Usage
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
useRect(refEl?)
RefEl
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.
Usage
const rect = useRect(divRef: ReactRefElement)
rect.width: number
rect.height: number
rec.top: number
rect.bottom: number
rect.right: number
rect.left: number
Contributors
Paweł Pęczkowski |