Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
A React virtualized, autosizing masonry component based upon Brian Vaughn's react-virtualized and further inspired by react-window.
npm i masonic
yarn add masonic
React >16.8
is a minimum requirement because
this package relies on and provides React hooks.
Brian's Masonry component is great in its
performance and versatility, but I wanted something more directly suited
to my growing needs for scalable masonry layout. I also desired something
with an API that more closely matched react-window
's awesome API.
<Masonry>
An autosizing virtualized masonry component which only renders items currently visible in the window.
import {Masonry} from 'masonic'
const items = []
for (let i = 0; i < 1000; i++) {
items.push({id: i})
}
const EasyMasonryComponent = props => (
<Masonry items={items}>
{({index, data, width}) => (
<div>
<div>Index: {index}</div>
<pre>{JSON.stringify(data)}</pre>
<div>Column width: {width}</div>
</div>
)}
</Masonry>
)
columnWidth
<number>
required240
Masonic
will automatically
size your columns to fill its container based on your provided
columnWidth
and columnGutter
values. It will never render
anything smaller than this defined width unless its container
is smaller than its value.columnGutter
<number>
0
columnCount
<number>
Masonic
derives the column count from the provided
minimum column width. However, in some situations it is nice to be
able to override that behavior (e.g. when creating a <List>
)render
<React.Component|function>
requiredchildren
items
below. It receives 3 properties from Masonic
:
index
items
array belowdata
<any>
items[index]
from the items
array belowwidth
items
<array>
requireddata
property passed to your render
component. It
is also used for the onRender
callback and the itemKey
generator.
Its length is used for determining the estimated height of the
container.itemHeightEstimate
<number>
300
items
to initially render.itemAs
<React.Component|string|function>
div
li
and the as
prop to ul
.itemStyle
<object>
itemKey(item: any, index: number)
<function>
render
component is not stateful and does not extend PureComponent
itemKey={data => data.id}
as
<React.Component|function|string>
div
ul
id
<string>
className
<string>
style
<object>
role
<string>
grid
tabIndex
<number>
0
tabindex
value to apply to the container. Used for accessibility.initialWidth
<number>
1280
window
is not defined, i.e. in SSR.initialHeight
<number>
720
window
is not defined, i.e. in SSR.overscanBy
<number>
2
2
you're saying 'render enough elements to fill two windows'.windowScroller
<object>
scroll
<object>
fps
<number>
8
8
effectively means the scroll
position will only update 8
times in 1 second, or once every
125ms
.size
<object>
wait
<number>
120
120
is a sane default, as it feels
instantaneous when you stop resizing and it doesn't do too
much work in the interim.onRender(startIndex: number, stopIndex: number, items: array)
<function>
startIndex
<number>
stopIndex
<number>
items
items
propWhen a ref
is provided to this component, you'll have access to its
following methods:
clearPositions(): void
items
. You could also provide a unique key
property to the <Masonry>
component to achieve similar.<List>
An autosizing virtualized list component which only renders items currently
visible in the window. This is just a single-column Masonry
component.
This component inherits all of the props listed in <Masonry>
with exception
to columnWidth
, columnCount
, and columnGutter
which are discarded.
rowGutter
<number>
useInfiniteLoader(loadMoreItems: function, opt: object): onRenderCallback
A React hook for seamlessly creating an infinite scrolling Masonry
or List
component.
import {Masonry, useInfiniteLoader} from 'masonic'
const fetchMoreItems = memoize((startIndex, stopIndex) =>
fetch(
`/api/get-more?after=${startIndex}&limit=${startIndex + stopIndex}`
).then(items => {
// do something to add the new items to your state
})
)
const InfiniteMasonry = props => {
const maybeLoadMore = useInfiniteLoader(fetchMoreItems)
return <Masonry {...props} onRender={maybeLoadMore} />
}
loadMoreItems
<function>
required(startIndex: number, stopIndex: number, items: array): Promise
startIndex
, stopIndex
, items
values to prevent
loading data more than once.opt
<object>
isItemLoaded
<function>
(index, items) => items[index] !== undefined
(index: number, items: array): boolean
minimumBatchSize
<number>
16
threshold
<number>
16
16
means that data will start loading when
a user scrolls within 16
items.totalItems
<number>
9E9
react-virtualized/Masonry
There are actually quite a few differences between these components and the originals, despite the overall design being highly inspired by them.
The original component requires a <CellMeasurer>
,
cellPositioner
, and cellMeasurerCache
. In Masonic
this
functionality is built in and uses resize-observer-polyfill
for tracking cell size changes.
This component will auto-calculate the number of columns to render based
upon the defined columnWidth
property. The column count will update
any time it changes.
The implementation for updating cell positions and sizes is also much more efficient in this component because only specific cells and columns are updated when cell sizes change, whereas in the original a complete reflow is triggered.
The Masonry component only renders relative to its parent container's width
and the browser window's height. The original component is tuned for
rendering inside a parent container and not the window. You can import
FreeMasonry
to customize this behavior.
The API is a complete rewrite and because of much of what is mentioned above, is much easier to use in my opinion.
react-virtualized
binary-search-bounds
and interval-tree-1d
FAQs
🧱 masonic
We found that masonic demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.