😎 ♻️ A tiny React hook for rendering large datasets like a breeze.
License: MIT License
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
In this example when you try to scroll with the mouse, the page freezes and crashes.
Maybe this is mine alone?
I tried to do the basic example with the table HTML tag but I am getting weird behavior.
Steps to reproduce the behavior, please provide code snippets or a repository:
Hi. Thanks for this awesome virtualization library.
However I couldn't found an example detailing usage on a window. Something like the windowscroller in react-virtualized.
Can you explain/provide example on how to use react-cool-virtual on a window instead of a scroll container with an outerRef?
Best regards.
First of all, this library is great and really easy to use. I was making a demo with lazy loading + filtering and I think I found a bug:
The indices passed to loadMore are not always correct. For example:
loadMore method receives e.startIndex=50 and e.stopIndex=54.This is wrong because there are only 50 items. When the user scrolls down quickly to the bottom, the loadMore method is never called with indices 45-49. Then the items are never loaded and the user keeps seeing the loading animation.
Also, even if you don't scroll to the end of the list, scrolling to certain positions results in the data not being loaded.
https://codesandbox.io/s/rcv-infinite-scroll-forked-g48o7
This is pretty much just the Infinite Scroll demo (https://github.com/wellyshen/react-cool-virtual#infinite-scroll). That demo itself contains a bug when loading the data -- it just appends the new comments to the existing array, but when the user scroll quickly the indices are not necessarily continuous. I fixed this in the demo by setting the item to the appropriate index.
Other than that, I only added a console log to loadMore.
This is a screenshot of what can happen when quickly scrolling down to the last item. loadMore should load items 500-504, which don't even exist. Note that the last call to loadMore was with the indices 430-434. This results in the visible items not getting loaded at all and the user keeps seeing the loading animation.
The correct indices for the visible range are passed to loadMore and isItemLoaded.
I've seen that the index is computed as Math.floor((vStop + 1) / loadMoreCount) (https://github.com/wellyshen/react-cool-virtual/blob/master/src/useVirtual.ts#L445). With +1 it may skip to the next page / batch. It also does not take into account the vStart value, when the user scrolls down quickly those items may not be loaded either.
I'm not quite sure, but I suppose the computation should use the vStart and vStop values, quantize those to the corresponding page / batch number, then use that and take care of the case when two pages / batches are visible on the screen and need to be loaded?
When chrome smooth scrolling flag is enabled, the scrollToItem api is not working as expected.
scrollToItem is working and the success callback should be invoked.
Add screenshots to help explain your problem.
This bug can only be reproduced on Windows. I've already ship this package into production env, please help me with this issue.
Thanks.
Would be really helpful to have an example of infinite scroll working in both sides (up and down). I was only able to find examples to top or bottom, but not both. Use cases: chat applications.
Thank you for your hard work!
Im getting this error
TS2322: Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'. Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'RefObject<HTMLDivElement>'. Types of property 'current' are incompatible. Type 'HTMLElement | null' is not assignable to type 'HTMLDivElement | null'. Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'. lib.dom.d.ts(6327, 5): 'align' is declared here. index.d.ts(137, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'
Example of use
const { outerRef, innerRef, items, scrollToItem } = useVirtual<HTMLElement, HTMLElement>({
itemCount: 1000,
itemSize: 25,
});
return (
<div ref={outerRef} >
<div ref={innerRef}>
...
</div>
</div>
);
A clear and concise description of what the bug is.
Not to see the error
Add screenshots to help explain your problem.
The title explains it :)
When the itemCount changes, i.e. when new items are passed, the optionally (or by default) scrollTo(0) should be invoked.
Ps: what I do now is a useEffect.
Hey,
This is a super cool hook. But the examples that are given are only of scrolling inside some kind of a fixed window frame with outer and inner refs.
I am trying to load more items when the user scrolls down using the main vertical scrollbar of the browser window. This is very critical to my Newsfeed application. How can this be done? Can you provide an example?
I'd like a way to scroll to the bottom of the list.
Either a scrollToBottom callback, or have the scrollTo callback take an option to go to the bottom.
const { scrollToBottom } = useVirtual({…});
scrollToBottom();
scrollToBottom({ smooth: true });const { scrollTo } = useVirtual({…});
scrollTo("bottom");
scrollTo({ offset: "bottom", smooth: true });I currently implement this with scrollToItem({ index: itemCount - 1, align: "end" });, though it required me rearranging some code. This is also what's used in the "stick to bottom" example.
Thanks!
This lib looks totally promising. I want to use this library on my website.
But it missed the 2 most important features: window scrolling + scroll restoration when navigating back.
I tried https://virtuoso.dev/ but it doesn't work with scroll restoration.
Other libraries are hard to use and buggy. I spent 2-3 days learn react-window + virtuoso, and disappointed 😥
Also, I hope you can test with next.js - the most popular react framework.
If you scroll quickly to the end of the list of items in the Infinite Scroll, it does not load the data, you have to scroll a bit for it to load correctly.
The Infinite Scroll example shows the bug.
Show me the bug on CodeSandbox.
The data should be loaded.
https://i.gyazo.com/742f0acfb10847bb684c1d9a5288ff38.mp4
👋🏻 Hi guys, this is Welly from Taiwan. I spend a lot of time in this library. I'd love to know which companies are using this library for their product(s) so I can mention you in the README.
Please share the following information with me:
The error ResizeObserver loop completed with undelivered notifications always appears when the new item is being rendered into the list.
I don't know how to reproduce it, but this is the same problem as described here wellyshen/react-cool-dimensions#373.
There are no such errors during rendering of the list.
Can't scroll at the end of a million data.
The position of the scroll bar cannot scroll after the position of 600,000 data
Show me the bug on CodeSandbox.
Can use mouse to scroll
I'm looking at using react-cool-virtual to render a chat window. Loading my items, and then scrolling to the end of the list, is proving to be pretty messy. Among other things, you get some render flashes, sometimes jumpiness, etc.
It would be nice to have the option to start the chat at the end, and skip the initial render that happens at the top of the list.
I've spend a lot of time trying to optimize/improve the scroll-to-end on load, but it's proving rather difficult to improve matters with that path.
Another option I've considered is a flex column with flex-direction: column-reverse, in which case you could, in theory, just load your items in reverse order, but I don't think the way react-cool-virtual works would play nicely with this idea.
i'm trying to build a scrollable container with horizontal direction, will react-cool-virtual work with react-use-gesture and react-spring?
Is it possible to achieve more or less immediate scroll/jump to item with index?
It would be ideal to scroll fast from top to bottom (or anywhere in-between) and back.
Note: Scrolling from bottom to top already behaves like expected.
It would be nice, if scrollToItem() would resemble Element.scrollIntoView(). Specifically with { behavior: 'auto' }. Supporting block and inline options would be perfect, but (very) optional.
N/A. Currently I'm relying on Element.scrollIntoView() for non-virtualised lists.
The following CodeSandbox demonstrates an issue with scrolling from top to the bottom of the list: https://codesandbox.io/s/white-glade-xnu3u
End keystickyIndices must be dynamic. A good example of a chat room where the date should always be updated is
In my project, I accept data and render lists through websocket. In some cases, I don't want to use smooth, so I found this problem.
The problem occurs in concurrent network requests(maybe, i guess😂). When smooth is set to false, it cannot stick to bottom.
But when smooth is set to true, the bug disappears
👉CodeSandbox.
Although the code is not well written, it can be reproduced. I modified lines 43 and 53. You can see the effect
Show me the bug on CodeSandbox.
sticking to bottom all the time
Abstract list components receives rows as props. useVirtual() is used in this component.
Filtering (i.e. truncating) rows in parent component leads to TypeError: Cannot read property 'start' of undefined,
but only if original/longer list was scrolled down a page or so before filtering.
Steps to reproduce the behavior, please provide code snippets or a repository:
The error show a little less frequent, when entries are managed as local state (commented out below).
resetScroll seems to have no impact on error condition.
const entries = props.entries
// const [entries, setEntries] = React.useState(props.entries)
// React.useEffect(() => {
// setEntries(props.entries)
// }, [props.entries])
const { outerRef, innerRef, items, scrollToItem } = useVirtual({
itemCount: entries.length,
resetScroll: true
})
TypeError: Cannot read property 'start' of undefined @ var currStart = msData[vStop].start;In case entries are managed as state in
4. Repeat steps 1, 2 and 3
5. TypeError: Cannot read property 'start' of undefined @ var currStart = msData[vStop].start;
The primary problems seems to be that items array is often 'overshooting', i.e. not in sync with rows/entries, items length exceeds rows length. In this case I can only return null as a result:
const card = ({ index, measureRef }) => {
// Why can this happen?
if (index >= entries.length) {
console.warn('<List/> overshooting', `${index}/${entries.length}`)
return null
}
const entry = entries[index]
return child({
entry,
id: entry.id,
focused: focusId === entry.id,
selected: selected.includes(entry.id),
ref: measureRef
})
}
https://codesandbox.io/s/keen-thunder-e0f5m
Don't crash and burn, when list is filtered in parent.
process.versions = {
"node": "14.16.0",
"v8": "9.1.269.36-electron.0",
"uv": "1.40.0",
"zlib": "1.2.11",
"brotli": "1.0.9",
"ares": "1.16.1",
"modules": "89",
"nghttp2": "1.41.0",
"napi": "7",
"llhttp": "2.1.3",
"openssl": "1.1.1",
"icu": "68.1",
"unicode": "13.0",
"electron": "13.1.6",
"chrome": "91.0.4472.124"
}
Scrolling down the 800 row list from CodeSandbox in Safari frequently show the following error message in console (without stack trace): [Error] ResizeObserver loop completed with undelivered notifications. (x17)
But Safari is NOT the target environment! Might be helpful anyway.
In the blitzjs project, the list items appear to flicker when scrolling
Go to codesandbox and scroll down the list
https://codesandbox.io/s/romantic-bhabha-3d6wv?file=/app/pages/index.tsx
This bug only appears in blitzjs and works normally on nextjs
scrollToItem doesn't work as expected when using StickyHeaders. When scrolling to an index, and align is 'start', it should be scrolled to the top, but still be visible underneath any 'stuck' headers. Currently, it's scrolled to the absolute top, and thus, is obscured by sticky heads.
Create a a demo with sticky headers and try to scrollToItem to an index which is not a sticky header.
I'm facing some kind of strange behavior when trying to use virtual scrolling along item filtering. For some reason I'm getting more items in the virtual items array than in the filtered items array. Maybe it's some React quirk that I don't understand?
I've prepared a code sandbox (see below).
Try to enter Item #22 in the search box and the app will crash. In the browser console you are able to see that while filtered array has length of 1 (which is correct), virtual array has length of 5 and the app crashes. The same thing will happen if you try to find item that does not exist, try putting "hello" in the search box. If you instead use a commented line, it will fix this.
https://codesandbox.io/p/sandbox/bold-lucy-ypnsk1
I was searching through issues in this repo and found this: #248
In the code sandbox for this issue you can see that the author was puzzled too with the same thing: https://codesandbox.io/s/lively-fast-5834r?file=/src/List.js:448-655
I expect virtual items array to have a length that is not greater than the original items array length.
Displaying a short list (81 entries) after a long list (830 entries) skips all but two (or a few) entries of shorter list and introduces excess free space before items displayed. resetScroll is enabled and itemCount managed as local state.
This only happens when first (longer) list was scrolled down for a few pages.
Usage:
const [itemCount, setItemCount] = React.useState(entries.length)
const { outerRef, innerRef, items, scrollToItem } = useVirtual({
itemCount,
resetScroll: true
})
React.useEffect(() => {
setItemCount(entries.length)
}, [entries])
I'm working on a CodeSandbox which reproduces this behavior. This will take a few days.
Second (shorter) list is displayed with first entry at the top (provided resetScroll is working as intended).
process.versions = {
"node": "14.16.0",
"v8": "9.1.269.36-electron.0",
"uv": "1.40.0",
"zlib": "1.2.11",
"brotli": "1.0.9",
"ares": "1.16.1",
"modules": "89",
"nghttp2": "1.41.0",
"napi": "7",
"llhttp": "2.1.3",
"openssl": "1.1.1",
"icu": "68.1",
"unicode": "13.0",
"electron": "13.1.6",
"chrome": "91.0.4472.124"
}
N/A
Hi @wellyshen
I found an old issue about testing with react-cool-virtual where you mentioned that a polyfill to ResizeObserver is needed and I've done that, so this problem is not related to the ResizeObserver.
I created a lib that uses react-cool-virtual to render some data and when I use this lib in another project, the data isn't loaded when running unit tests - the loadMore function simply isn't called when the component is rendered on the test environment; I've been trying to debug this for a while but can't find the problem or if I'm doing something wrong.
Note that when running the application on the browser, everything works as expected.
EDITED ON 04-19-2023: well, it turns out that loading the polyfill for ResizeObserver to the test environment didn't work and you have to explicitly mock it; it would be nice to have this documented, so anyone with the same problem didn't have to look through the source code for an example.
It seems that when you mount/unmount the component and the itemCount does not change the items is [] (after the first time).
A hacky way out of it is to do something like itemCount: myCount + Math.round(Math.random() * 100) and filter later.
In other words, some kind of check takes place based on the itemCount that causes cache-related (I presume) issues.
I use this library in my react project, so when i create a data list like in examples from documentation i get an error.
These components are just styled div elements. And i also tried it with casual div-tag.
I dont know what happens and cant find solution in the internet.
That`s an exception:
I'm testing the library and with dynamic sizing I cannot get a memoized component to work. What I can see is that measureRef is always a new reference which prevents us from using memo() to its effect.
Maybe moving the measureRef function to the top component level and wrapping it in useCallback can help, but I'm having trouble making a working PR.
You can see that adding memoization does not change how many times a component is rendered. It is rerendered whenever something new is added/removed from the list.
It seems to be the measureRef reference as when I don't provide the measureRef function to the component it seems to work fine.
Show me the bug on CodeSandbox.
Only the newly inserted elements should rerender.
First things first: Congratulations on the well designed interface! It was easy as pie to integrate useVirtual() with my existing list. Well done!
When scrolling down, at some point the list/container outgrows its allotted size towards to bottom of the screen (see screenshots below). Exactly when list (innerRef) margin-top exceeds container (outerRef) clientHeight.
Also, from this point on, the number of items grows with each step down.
const List = props => {
const { child, entries } = props
const { outerRef, innerRef, items, scrollToItem } = useVirtual({
itemCount: entries.length,
itemSize: 140, // average/estimate [~100px; ~200px]
overscanCount: 10 // has no effect on observed issue
})
React.useEffect(() => {
if (props.scroll === 'none') return
if (props.focusIndex === -1) return
scrollToItem(props.focusIndex)
}, [scrollToItem, props.focusIndex, props.scroll])
const card = ({ index, measureRef }) => {
const entry = entries[index]
return child({
entry,
id: entry.id, // key
ref: measureRef,
focused: props.focusId === entry.id,
selected: props.selected.includes(entry.id)
})
}
return (
<div className='list-container' ref={outerRef}>
<div
ref={innerRef}
className='list'
>
{ entries.length ? items.map(card) : null }
</div>
</div>
)
}
I can try to isolate the problem, if it would be helpful. I'm holding back until your initial feedback.
process.versions = {
"node": "14.16.0",
"v8": "9.1.269.36-electron.0",
"uv": "1.40.0",
"zlib": "1.2.11",
"brotli": "1.0.9",
"ares": "1.16.1",
"modules": "89",
"nghttp2": "1.41.0",
"napi": "7",
"llhttp": "2.1.3",
"openssl": "1.1.1",
"icu": "68.1",
"unicode": "13.0",
"electron": "13.1.6",
"chrome": "91.0.4472.124"
}
Before I get to the bug details I would first like to say how impressed I've been with using this library so far.
It is straight-forward, well documented and I really like how the implementation doesn't make assumptions on the way to use your components.
Thanks for the time and effort you have put into this! 💯
I have a content panel with a long list of variable height items, each using the measureRef option.
The scrollToItem action with the smooth option can get caught in an unbreakable bouncing animation loop as it constantly tries to find the target scroll offset position - see the glitchy video examples below.
In my case the content items are quite large so it happens more easily if the initial itemSize is set to a small value like 100, and less so if it is something like window.innerHeight. It also seems to happen less often with align: 'start' but can still occur.
Also note that the measured heights of the items are sometimes floating point values (I'm using an HDPI display).
Forcing the measured size to be rounded down to an integer:
const measuredSize = Math.floor(target.getBoundingClientRect()[sizeKey]);at
react-cool-virtual/src/useVirtual.ts
Line 351 in 0259cf1
helped, but the problem still happens occasionally.
I managed to replicate the problem here (it might take a few clicks of the button to see the issue):
https://codesandbox.io/s/rcv-scroll-to-methods-forked-62gf3?file=/index.js
It scrolls to position without getting stuck in a bouncing around animation.
It might be that dynamic height items will always have potential for indeterministic behaviour so maybe there needs to be an extra guard against getting stuck in a never ending animation (maybe if the direction changes more than a couple of times it will end the animation).
The issue when it appears on CodeSandbox:
https://user-images.githubusercontent.com/3010/124582941-6c3fd180-de4a-11eb-8ed0-dc7496366ca2.mp4
The extreme case from my app (flicker warning!):
https://user-images.githubusercontent.com/3010/124571677-ecad0500-de3f-11eb-8dec-c1e54848846e.mp4
requestAnimationFrame practice in "Pre-pending Items" demo doesn't help a lot with scroll jumping. Yes, maybe it helps "a bit", but the lag is pretty annoying even in provided demo.
I checked how it works in real app (much more heavy than your demo) and observed lag is pretty much noticeable.
Any other ways how to prevent this lag?
I have responsive grid layout with posts that have titles, cover images, descriptions etc.
React-cool-virtual doesn't detect position of my elements. It's behaviour like it has deal with list and set start position of elements like 0 - 200 - 400 - 600 px etc. Maybe you have some examples i've not found or ideas about such type of problem ?
P.S start property can't be changed. How then to implement margins in grid ?
I think this is one of the most agile virtual scrolling libraries that I've found so far. I'm trying to decide which lib I'm going to use and really wanted to use this one in my project. Is there any working examples with our dear
approach to create a table?All the examples here (and inside other libraries's repos) are always focused on
Glad if someone could provide a basic example, as I didn't get it to work here :/
When pre-pending on a reverse list with Safari the list will jump to the top of the added data, sometimes the list will also flicker when new data is added.
This is reproducible for me on iOS/Safari (iphone and ipad) using the reverse infinite scroll example https://codesandbox.io/s/rcv-prepend-items-ui06h (mentioned in #230).
Is there a way to suspend scrolling (or prevent scroll events) when reaching the top of the list before pre-pending more items?
Thanks for this library!
Run the below sandbox on iOS using Safari and scroll up to load new data.
https://codesandbox.io/s/rcv-prepend-items-ui06h
Ideally the scroll position would stay at the top of the list like how it works on chrome/desktop currently instead of jumping to the top of the new items added.
The readme mentions filtering but the example doesnt really make sense. It mostly just looks like you can change how many things you wish to render.
as you can see the sticky header doesn't work expected
import numeral from 'numeral'
import useVirtual from 'react-cool-virtual'
export default () => {
const [{ loading, records, count, stickyIndices }, setState] = useState({ loading: true, records: [], count: 0, stickyIndices: [] })
const countRecords = () => connection.count({
from: 'Records',
where: {
date: {
'-': {
low: dayjs().startOf('year').toDate(),
high: new Date(),
}
}
}
})
const getRecords = () => connection.select({
from: 'Records',
where: {
date: {
'-': {
low: dayjs().startOf('year').toDate(),
high: new Date(),
}
}
},
order: [
{ by: 'date', type: 'desc' },
{ by: 'createdAt', type: 'desc' },
]
})
const getData = () => {
Promise.all([countRecords(), getRecords()]).then(([count, records]) => {
console.log(count)
const dateHeaderExist = {}
const newList = []
const _stickyIndices = []
let lastHeaderName
for (const itemIdx in records) {
const item = records[itemIdx]
const headerName = dayjs(item.date).format('YYYYMM')
if (!dateHeaderExist[headerName]) {
const dateHeader = { headerName, count: 1, heading: dayjs(headerName).format('M'), date: dayjs(headerName).toDate(), fmt: dayjs(headerName).format('YYYY.MM.DD') }
newList.push(dateHeader)
newList.push(item)
lastHeaderName = dateHeaderExist[headerName] = dateHeader
_stickyIndices.push(parseInt(itemIdx))
} else {
newList.push(item)
lastHeaderName.count += 1
}
}
console.log(_stickyIndices)
setState({ loading: false, records: newList, count, stickyIndices: _stickyIndices })
})
}
useEffect(() => {
getData()
emitter.on('refresh', getData)
return () => {
emitter.off('refresh', getData)
}
}, [])
if (loading) {
return (
<div className={`flex flex-col flex-center min-h-screen pt-16 pb-14`}>
<i className='mdi mdi-loading text-4xl animate-spin' />
</div>
)
}
if (records.length === 0) {
return (
<div className='min-h-screen pt-16 pb-14 flex flex-col flex-center'>
<div>点击下边 + 号记一笔</div>
</div>
)
}
return (
<RecordsComponent records={records} count={count} stickyIndices={stickyIndices} />
)
}
function RecordsComponent ({ records, count, stickyIndices }) {
const { outerRef, innerRef, items } = useVirtual({
itemCount: count,
itemSize: 60,
stickyIndices,
})
return (
<div ref={outerRef} className='max-h-screen pt-16 pb-14 overflow-y-auto'>
<div ref={innerRef}>
{/* {records.map(ItemComponent)} */}
{items.map(wrapper(records))}
</div>
</div>
)
}
function wrapper (records) {
return function ItemComponent ({ index, measureRef }) {
const item = records[index]
if (item.heading) {
return (
<div ref={measureRef} className='sticky top-0 px-4 py-1 bg-blue-50 text-xs'>{item.fmt}月</div>
)
}
const incomingTextColor = item.incoming ? 'text-red-500' : 'text-green-500'
const incomingText = item.incoming ? '+' : '-'
return (
<div ref={measureRef} key={item.id} className='flex items-center px-4 py-2 bg-white'>
<div className='flex-auto flex flex-col pr-8'>
<div className='font-thin text-xl'>{item.name}</div>
<div className='space-x-2 text-xs'>
<span>{item.tag}</span>
<span>{dayjs(item.date).format('M.D')}</span>
<span>{index}</span>
</div>
</div>
<div className={`text-sm ${incomingTextColor}`}>
{incomingText}{numeral(item.amount).format('0,0.00')}
</div>
</div>
)
}
}I get a scrolling error when transform: scale(0.5) is applied to the parent element (outer). The movement is unnatural and points in a completely different direction.
Steps to reproduce the behavior, please provide code snippets or a repository:
https://codesandbox.io/s/rcv-stick-to-bottom-cxsgw?fontsize=14&hidenavigation=1&theme=dark
When I hit the Paste to Bottom button, it should stick to the bottom, but it doesn't, and if I scroll down quickly, it shakes violently.
I have an errors react-testing-library doesn't see content because it has not rendered yet. How to test such app ?
Hi, thanks for the library. Need an example with infinite scrolling up
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.