askides / react-plock Goto Github PK

Possible steps to reproduce,

1. Add an onClick event on the items to update URL search params.
2. The click event is not working sometimes, It's not consistent though.
3. Try making the cursor out of focus in the inspector and click directly on the item.
4. It is recreating the grid on every item click.

Also, there is a delay in Masonry formation, after the DOM hydrates it takes a second to form masonry grid. Is there a config or possible fix?

When using the Masonry plugin, longer elements disrupt the optimal column layout, causing smaller elements following them to not align correctly. This issue impacts the visual consistency and balance of the layout, especially when displaying content with varying lengths.

Steps to Reproduce

Set up a layout using the Masonry plugin.
Include elements of varying lengths, with some significantly longer than others.
Observe how longer elements affect the layout of smaller elements in subsequent columns.

Expected Behavior

The Masonry plugin should maintain a balanced column layout regardless of the length of individual elements, ensuring that smaller elements are positioned optimally without being impacted by longer ones.

The Value Add

Pretty much all Masonry packages have this issue. If you solve it you are leaps ahead.

Image of issue

Hello,
I am using react-plock for a Gatsby project and it's causing the build to fail.

Definition in package.json,
"react-plock": "^1.1.0",

Error message,
WebpackError: ReferenceError: window is not defined

• index.js:1
  [ramitmitra.com]/[react-plock]/dist/index.js:1:409

• index.js:1
  [ramitmitra.com]/[react-plock]/dist/index.js:1:789

• react.js:35
  [ramitmitra.com]/[fast-deep-equal]/react.js:35:32

• useCallbackRef.js:28
  [ramitmitra.com]/[@restart]/hooks/esm/useCallbackRef.js:28:18

• useEventCallback.js:6
  [ramitmitra.com]/[@restart]/hooks/esm/useEventCallback.js:6:1

• static-entry.js:295
  webpack:/ramitmitra.com/.cache/static-entry.js:295:22

• useMounted.js:2
  [ramitmitra.com]/[@restart]/hooks/esm/useMounted.js:2:1

Please look into the issue and release a fix. Thank you for the great package and all the hard work.

https://github.com/itsrennyman/react-plock/blob/e10bd852885d639f6d6e454d4e19ba10564260d1/packages/react-plock/src/Plock.tsx#L88

There is a ")" missing.
Not sure why it still works.

When using this package in NextJs, I get the following warning:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Any chance for SSR support?

I wonder if it would be possible to add the ability to use different gap values using the same "breakpoint" method as the columns?

Is any plans to support different column width?

Like:

| 25% | 50% | 25% |

Same as @desandro did in his masonry library https://github.com/desandro/masonry.
https://masonry.desandro.com/layout

Hi,

Thank you for this fantastic library. Are we able to plock images in rows?

I get this error using nextJs:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '~/node_modules/react/jsx-runtime' imported from ~/node_modules/react-plock/index.js
Did you mean to import react/jsx-runtime.js?

it will be good if we create a types package (small) and push it to the DefinitelyTyped repos

the props clasName is invalid

Image missing in list after change columns?

🚨 The automated release from the next branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the next branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

This is a great lightweight package. But the package is currently set a default columns and gap to 1, which on Next.js it results to flickering on initial render.

const [values, setValues] = React.useState({ columns: 1, gap: 1 });

Will you consider adding additional support to use User-Agent header as a proxy to set the default columns and gap if it's available to minimise the flicker, then having useEffect to update once the window object is available?

Hello,

is it possible to get the real index in the render ?

const items = [...imageUrls];

  return (
    <Masonry
      items={items}
      config={{
        columns: [1, 2, 3],
        gap: [24, 12, 6],
        media: [640, 768, 1024],
      }}
      render={(item, idx) => (
        <img key={idx} src={item} style={{ width: "100%", height: "auto" }} />
      )}
    />
  );

Here idx is the number of the row, is there a proper clean way to know that I am displaying third item ? Like "index" in a map.

Thank you, and thanks a lot for your work

Description

When running npm install react-plock I get the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"18.1.0" from [email protected]
npm ERR! node_modules/react-plock
npm ERR!   react-plock@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I'm currently on version 18.2.0 of React which is why this is erroring. I believe to fix this, the related dependencies just need to be updated.

Thanks!