Comments (15)
@matthiaskaemi there is an example in the file Link
from react-components.
onInfiniteLoad
is just a function that you can use to react to the scrolling state of the page.
You can disable it by removing the code that handles the checking or firing. I believe you can also specify props.threshold = -99999
which should invalidate the conditionals.
from react-components.
@matthiaskaemi you can use whatever properties you like so long as they fit the shape of the props expected by MyMasonryItem
or whatever you prefer to call it :)
Side note: this issue has run it's course. Folks please feel free to open a separate issue
from react-components.
The code shared still has some leftover pieces from where it was originally pasted.
Does the following work instead?
const componentName = itemComponent.constructor.displayName || itemComponent.constructor.name;
It's looking for .type
which is something is specific to where I wrote it - doesn't apply here
from react-components.
i changed that now onto the next line
const componentName = itemComponent.constructor.displayName || itemComponent.constructor.name;
`if (!('getHeightFromProps' in itemComponent.constructor) && !('getHeightFromProps' in itemComponent.type)) {
throw new Error(`Component type ${componentName} does not respond to 'getHeightFromProps'`);
}`
throws error
"Cannot use 'in' operator to search for 'getHeightFromProps' in undefined"
from react-components.
i am trying to cleanup the code but i still cant understand out
static getHeightFromProps = (getState, props, columnSpan, columnGutter) => { return IMAGE_HEIGHT + TITLE_HEIGHT + FOOTER_HEIGHT; }
in class MyMasonryItem
from react-components.
Give the latest revision a try, for your component you will need a static function called getHeightFromProps
which returns the pixel height of the item based on those arguments. Column span is the number of columns the item will lay across, and columnGutter is the spacing between.
from react-components.
Still the same error itemComponent returns undefined.
"Cannot use 'in' operator to search for 'getHeightFromProps' in undefined"
if (!('getHeightFromProps' in component.constructor) && !('getHeightFromProps' in component.type)) { throw new Error(
Component type ${componentName} does not respond to 'getHeightFromProps'); }
btw did you forgot to change component to itemComponent or is it supposed to be that way??
from react-components.
Yeah sorry, this was copy pasted when I wrote the article. The implementation I used at the time had much more custom logic. Give the latest revision a shot 👍
from react-components.
i am halfway through..
can you please share onInfiniteLoad ()
and shouldn't there be a way to disable infiniteload?
from react-components.
Hey layout engine is working fine now but the items keep disappearing from the page it happens sometime on scroll and almost always on window resize i don't have infiniteLoading just finite set items.
any idea what could be causing this?
from react-components.
i removed the onclickListeners
. now scrolling doesn't make the images go away but now the most images doesn't even load on mobile devices!!! will on desktops it does.
what could be causing this? really could use your help......
from react-components.
Please provide a REPL or example app where the issue is occurring and I will take a look 👍
from react-components.
I am new to REACT. I can't understand, how the MyMasoneryItems are instantiated. I do have to provide an array of objects of this type, or any other type that implements that specification, right? How do I technically do that? Many greetings in advance from Berlin!
from react-components.
@artndes9 yes I saw the Example, but:
const myArrayOfItems = [{ name: 'Hello' }, { name: 'World' }]
how do I fill this array with reasonable Items...?
from react-components.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from react-components.