drcmda / mauerwerk Goto Github PK
View Code? Open in Web Editor NEW⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions
License: MIT License
⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions
License: MIT License
In the simplfied demo the text is appearing under the overlay while testing it on the mobile. Maybe we need to increase the z-index to handle it on the mobile
Hello, thank you for creating mauerwerk.
I am having some trouble making modifications as I am still kind of new to react.
What I am trying to do is fit image contents in the grid cells, and instead of specifying the height of each cells, I want to adapt the height to whatever contents is in the cell.
If you point out where should I be looking at, I would be very grateful.
I'm getting this error:
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in Spring (created by Transition)
Any thoughts?
Hello,
I have tried giving it a go with react-spring 7 and the page kinda froze with some infinite loop (didn't investigate much).
It would be super helpful if you can guide me updating the (awesome, bdw) library to work with latest react-spring.
Hi @drcmda - Thanks so much for all your work on this. It looks really awesome. I'm trying to get this running on a website so that I can use it as a gallery. I've dropped your simple demo from https://codesandbox.io/embed/z6ly40071p into my project and haven't altered anything yet.
The issue I'm having is that when the cell is maximized, it opens to 100% width and height of the entire Grid component. This ends up placing the contents of the maximized cell far off the screen.
In each of your demos, it appears that the cell is only opening to 100vh - which is what I would like.
To sum it up:
My Issue: maximize is opening far taller than what is visible on the screen
My Goal: Maximize opens cell/content to 100vh and 100vw
Any Ideas?
Thank you in advance for any guidance you might have.
Thank you for your time.
I am getting this warning on my console:
componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details...... Please update the following components: AnimatedComponent
I figured it's the react-spring dependency that needs to be updated. How do I go about this please?
Hello, We need update this packages.
This is a great component, but setting the dir attribute of the HTML page to rtl instead of ltr will cause a bug. The cells will be displaced outside of the containing grid.
Just want to leave a comment to let you know I think what you built is incredible. ❤️🎉
hi we want to disable animation on mobile, transitionMount={false} didnt work for us.
any other options we miss ?
so, at the demo we have this array:
[
{
name: 'Rare Wind',
description: '#a8edea → #fed6e3',
css: 'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)',
height: 200
},
{
name: 'Saint Petersburg',
description: '#f5f7fa → #c3cfe2',
css: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
height: 400
}
]
and grid working fine
i tried to feed it with 2x object and things falling apart.
[
{
key: "0d7987d0-0f8b-11e9-b2bc-8fce1edba3a5",
recipe: {
directions: (4) ["Place beef roast in crock pot.", "Mix the dried mixes together in a bowl and sprinkle over the roast.", "Pour the water around the roast.", "Cook on low for 7-9 hours."],
img: "http://img.sndimg.com/food/image/upload/w_266/v1/img/recipes/27/20/8/picVfzLZo.jpg",
prep_time: "30min",
recipe_yield: "8",
title: "Crock Pot Roast",
total_time: "3h",
url: "http://www.food.com/recipe/to-die-for-crock-pot-roast-27208"
}
}
]
just want to report it - in order to contribute. if this is fine - just close the issue. btw, nice work!
Is there a way to set the 'open' element by key as a prop, so Grid can be used as a controlled, stateless component? You could use this to, say, synchronise the open state with a router system.
<Grid
{...props}
openKey={1}
/>
Someone else also left a comment. I searched for a while for something to help me implement responsive masonry. I looked at everything I could find. This jumped out on reddit and this is by far the most functional of them all. Good job man.
Close this when you feel appreciated. Cheers.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.