card-window
Type aliases
CardProps
Ƭ CardProps<T>: Object
CardWindow provides the CardWindow.children component with this props.
Type parameters
| Name | Type |
|---|---|
T | extends any[] = any[] |
Type declaration
| Name | Type | Description |
|---|---|---|
col | number | col is the rendered column. |
data | T | data is an array. CardWindow passes data to the CardWindow.children component. |
index | number | index is the index of the data allocated to the CardWindow.children component. |
row | number | row is the rendered row. |
style | CSSProperties | style should be passed to the root of the CardWindow.children component. |
Defined in
CardWindowProps
Ƭ CardWindowProps<T>: Object
This props is for CardWindow. Missing description of function-type is bug.
Description of getKey
If you can use an id instead of array index for key,
define a getKey function.
Type parameters
| Name | Type |
|---|---|
T | extends any[] = any[] |
Type declaration
| Name | Type | Description |
|---|---|---|
cardRect | Rect | cardRect is used to calculate the rendering of CardWindow.children component. |
children | React.ComponentType<CardProps<T>> | children is a component that receives CardProps<T>. |
container? | { className?: string ; style?: Omit<CSSProperties, "width" | "height"> } | - |
container.className? | string | container.className are passed to the scrollable large container element. |
container.style? | Omit<CSSProperties, "width" | "height"> | container.style are passed to the scrollable large container element. |
data | T | data is an array. CardWindow passes data to CardWindow.children component. |
justifyContent? | JustifyContent | JustifyContent only supports 7 values. If the value is stretch, the CardProps.style has { flexBasis: 'auto' }. |
lastRowAlign? | LastRowAlign | LastRowAlign that defines how to align when the number of cards in the last row is less than the number of columns. |
loading? | Loading | loading? is a property for the infinite loading feature. |
maxCols? | number | Maximum number of columns can be set. |
overScanPx? | number | The number of px to render outside of the visible area. By default, CardWindow overscans 200px. |
root? | { className?: string ; style?: Omit<CSSProperties, "overflow"> } | - |
root.className? | string | root.className are passed to the root element of CardWindow. |
root.style? | Omit<CSSProperties, "overflow"> | root.style are passed to the root element of CardWindow. |
spacing? | Partial<Spacing> | These values are px. The defaults are 8px. |
thresholdOfVisible? | number | thresholdOfVisible is used for card visibility in onScroll event. Please set a value between 0 and 1. The default is 0.5. |
getKey? | (index: number, data: T) => string | If you can use an id instead of array index for key, define a getKey function. |
onScroll? | (props: OnScrollProps) => void | Called when the CardWindow scroll positions changes. |
Defined in
JustifyContent
Ƭ JustifyContent: "left" | "right" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch"
JustifyContent only supports 7 values.
If the value is stretch, the CardProps.style has { flexBasis: 'auto' }.
Defined in
LastRowAlign
Ƭ LastRowAlign: "left" | "right" | "inherit"
LastRowAlign that defines how to align
when the number of cards in the last row is less than the number of columns.
Defined in
Loading
Ƭ Loading: LoadingCard | LoadingRow
There are two rendering types for the infinite loading feature.
Defined in
LoadingCard
Ƭ LoadingCard: Object
LoadingCard(type: 'card') displays the loading component after the last card.
Missing description of function-type is bug.
Description of loadMore
loadMore is called when LoadingCard.Component is rendered.
Type declaration
| Name | Type | Description |
|---|---|---|
LoadingComponent | React.ComponentType<LoadingCardComponentProps> | LoadingCard.Component is rendered after the last card. |
count? | number | LoadingCard.count is the number of loading cards to display. |
type | "card" | - |
loadMore? | () => void | loadMore is called when LoadingCard.Component is rendered. |
Defined in
LoadingCardComponentProps
Ƭ LoadingCardComponentProps: Object
CardWindow provides LoadingCard.Component with this props.
Type declaration
| Name | Type | Description |
|---|---|---|
col | number | col is the rendered column. |
row | number | row is the rendered row. |
style | CSSProperties | style should be passed to the root of LoadingCard.Component. |
Defined in
LoadingRow
Ƭ LoadingRow: Object
LoadingRow(type: 'row') displays the loading component in the center next to the last row.
Missing description of function-type is bug.
Description of loadMore
loadMore is called when LoadingRow.Component is rendered.
Type declaration
| Name | Type | Description |
|---|---|---|
LoadingComponent | React.ComponentType<LoadingRowComponentProps> | LoadingRow.Component is rendered in the center next to the last row. |
height | number | height is the height of LoadingRow.Component. |
type | "row" | - |
loadMore? | () => void | loadMore is called when LoadingRow.Component is rendered. |
Defined in
LoadingRowComponentProps
Ƭ LoadingRowComponentProps: Object
CardWindow provides LoadingRow.Component with this props.
Type declaration
| Name | Type | Description |
|---|---|---|
style | CSSProperties | style should be passed to the root of LoadingRow.Component. |
Defined in
OnScrollProps
Ƭ OnScrollProps: Object
Type declaration
| Name | Type | Description |
|---|---|---|
direction | ScrollDirection | direction is either "forward" or "backward". |
indexesOfVisible | number[] | |
offset | number | offset is a number. |
updateWasRequested | boolean | updateWasRequested is a boolean. |
Defined in
Rect
Ƭ Rect: Object
These values are px.
Type declaration
| Name | Type |
|---|---|
height | number |
width | number |
Defined in
ScrollDirection
Ƭ ScrollDirection: "forward" | "backward"
Defined in
Spacing
Ƭ Spacing: Partial<_Spacing>
Defined in
Variables
CardWindow
• Const CardWindow: React.FC<CardWindowProps>
Defined in
Functions
range
▸ range(_start, _end?): number[]
Parameters
| Name | Type |
|---|---|
_start | number |
_end? | number |
Returns
number[]
Defined in
useResizeObserver
▸ useResizeObserver<T>(): Partial<Rect> & { ref: RefObject<T> }
useResizeObserver is a custom Hook for monitoring the size of the element.
If you give the hook an initial value for the element size, the hook will return that element size if ref is null.
const initialSize = { width: 200, height: 100 };
export const Example: React.FC = () => {
const [{ width, height }, ref] = useResizeObserver<HTMLDivElement>();
if (ref.current === null) {
console.log(`width: ${width}`); // 200 from initialSize
console.log(`height: ${height}`); // 100 from initialSize
} else {
console.log(`width: ${width}`); // actual element width
console.log(`height: ${height}`); // actual element height
}
return (
<div ref={ref}>
...
</div>
)
}
Type parameters
| Name | Type |
|---|---|
T | extends Element |
Returns
Partial<Rect> & { ref: RefObject<T> }