8000 Allow Partial Customization Without Losing Built-in Features · Issue #69 · uiwjs/react-json-view · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Allow Partial Customization Without Losing Built-in Features #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
EranAAA opened this issue Apr 29, 2025 · 4 comments
Open

Allow Partial Customization Without Losing Built-in Features #69

EranAAA opened this issue Apr 29, 2025 · 4 comments

Comments

@EranAAA
Copy link
EranAAA commented Apr 29, 2025

Hi, thanks for the great work on @uiw/react-json-view!

When customizing the component in v2, important features like:
• Text shortening (ellipsis)
• Expand/collapse for long values
• Copy-to-clipboard

are lost because internal components like StringView or CopyIcon are not exposed.

Feature Request:
Please consider exposing internal components or providing a way to extend rendering without losing the default behavior.
This would allow simple customizations (e.g., styling a specific key) without re-implementing core logic.

Thanks again!
@jaywcjlove
Copy link
Member

@EranAAA Regarding the “copy to clipboard” feature, it can already be customized by modifying the onClick method of the Copied component.

      <Copied
        render={({ 'data-copied': copied, style, onClick, ...props }, { value }) => {
          const styl = { whiteSpace: 'nowrap' }
          if (copied) {
            return <span style={{ ...style, ...styl }}>复制成功</span>
          }
          return <span style={{ ...style, ...styl }} onClick={onClick}>复制</span>
        }}
      />

Regarding "Text shortening (ellipsis)", if you want to customize the display of the ellipsis (...), I can provide a props to configure it, similar to the example below:

<JsonView stringEllipsis="..." />

react-json-view/core/src/types/index.tsx

Lines 82 to 84 in 725c4ce

const text = shorten ? `${childrenStr.slice(0, length)}...` : childrenStr;
const isRender = render && typeof render === 'function';

@EranAAA
Copy link
Author
EranAAA commented Apr 29, 2025

I will try the Copied 🙏 also i will appreciate an update about the ellipsis.
Thanks :)

jaywcjlove added a commit that referenced this issue Apr 29, 2025
@jaywcjlove
feat: add stringEllipsis props. #69
734b41c
jaywcjlove added a commit that referenced this issue Apr 29, 2025
@jaywcjlove
released v2.0.0-alpha.31 #69
3738564
@jaywcjlove
Copy link
Member

I’ve released v2.0.0-alpha.31 and added a stringEllipsis prop. @EranAAA

<JsonView stringEllipsis="..." />

@EranAAA
Copy link
Author
EranAAA commented Apr 30, 2025

Amazing 🤩

jaywcjlove added a commit that referenced this issue Apr 30, 2025
@jaywcjlove
test: fix test case. #69
6e70db2
github-actions bot pushed a commit that referenced this issue Apr 30, 2025
@jaywcjlove
test: fix test case. #69 6e70db2
8fda88a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaywcjlove @EranAAA
0