Skip to content

Commit 6b76507

Browse files
RaubzeugRaubzeug
authored
chore: update readme (#32)
1 parent 27e0583 commit 6b76507

File tree

1 file changed

+48
-13
lines changed

1 file changed

+48
-13
lines changed

‎README.md‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ The library uses [`@gravity-ui/unipika`](https://github.com/gravity-ui/unipika)
66
### Features
77

88
- virtualization
9+
- two scroll modes: window scroll and container scroll
910
- collaps/expand objects/arrays
10-
- search substring of key/value
11+
- search substring of key/value (case-sensitive and case-insensitive)
1112
- render one literal per line
1213
- long strings are truncated by ellipsis
1314
- full value might be seen in dialog
@@ -22,17 +23,44 @@ Depending on your package manager you may need to install `peerDependencies` man
2223

2324
## Usage
2425

26+
The library provides two entry points depending on your scrolling needs:
27+
28+
### Window Scroll (default)
29+
30+
Use this when you want the component to scroll with the browser window:
31+
2532
```ts
2633
import '@gravity-ui/uikit/styles/styles.scss';
2734
import '@gravity-ui/unipika/styles/unipika.scss';
2835

29-
import {ReactUnipika} from '@gravity-ui/react-unipika';
36+
import {ReactUnipika} from '@gravity-ui/react-unipika/window-scroll';
3037

3138
function renderJson(data: any) {
3239
return <ReactUnipika value={data} />;
3340
}
3441
```
3542

43+
### Container Scroll
44+
45+
Use this when you want the component to scroll within a specific container. You must provide a ref to the scroll container:
46+
47+
```ts
48+
import '@gravity-ui/uikit/styles/styles.scss';
49+
import '@gravity-ui/unipika/styles/unipika.scss';
50+
51+
import {ReactUnipika} from '@gravity-ui/react-unipika/container-scroll';
52+
53+
function renderJson(data: any) {
54+
const scrollContainerRef = React.useRef<HTMLDivElement>(null);
55+
56+
return (
57+
<div ref={scrollContainerRef} style={{height: '500px', overflow: 'auto'}}>
58+
<ReactUnipika value={data} scrollContainerRef={scrollContainerRef} />
59+
</div>
60+
);
61+
}
62+
```
63+
3664
## YSON notice
3765

3866
The library does not support YSON-format "as is", i.e. it is impossible to use/parse YSON data.
@@ -44,17 +72,24 @@ See more examples in [storybook](https://preview.yandexcloud.dev/react-unipika).
4472

4573
### ReactUnipika Component Props
4674

47-
| Prop | Type | Default | Description |
48-
| ------------------ | --------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------ |
49-
| `value` | `any` | required | The data to be rendered |
50-
| `settings` | `UnipikaSettings` | See below | Settings for Unipika formatting |
51-
| `inline` | `boolean` | `false` | Render in inline mode |
52-
| `children` | `React.ReactNode` | - | React nodes to render as children |
53-
| `extraTools` | `React.ReactNode` | - | Additional React nodes for tools |
54-
| `virtualized` | `boolean` | `true` | Enable virtualization for better performance with large data |
55-
| `className` | `string` | - | Custom CSS class name |
56-
| `customLayout` | `(args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode` | - | Function to customize the layout |
57-
| `toolbarStickyTop` | `number` | `0` | Top position in pixels for sticky toolbar |
75+
| Prop | Type | Default | Description |
76+
| ----------------------- | --------------------------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------- |
77+
| `value` | `any` | required | The data to be rendered |
78+
| `settings` | `UnipikaSettings` | See below | Settings for Unipika formatting |
79+
| `inline` | `boolean` | `false` | Render in inline mode |
80+
| `children` | `React.ReactNode` | - | React nodes to render as children |
81+
| `extraTools` | `React.ReactNode` | - | Additional React nodes for tools |
82+
| `virtualized` | `boolean` | `true` | Enable virtualization for better performance with large data |
83+
| `className` | `string` | - | Custom CSS class name |
84+
| `customLayout` | `(args: {toolbar: React.ReactNode; content: React.ReactNode}) => React.ReactNode` | - | Function to customize the layout |
85+
| `toolbarStickyTop` | `number` | `0` | Top position in pixels for sticky toolbar |
86+
| `renderToolbar` | `(props: ToolbarProps) => React.ReactNode` | - | Custom toolbar renderer function |
87+
| `collapseIconType` | `CollapseIconType` | - | Type of collapse/expand icon to use |
88+
| `showContainerSize` | `boolean` | - | Show the size of containers (objects/arrays) |
89+
| `initiallyCollapsed` | `boolean` | - | Whether to render the tree initially collapsed |
90+
| `caseInsensitiveSearch` | `boolean` | - | Enable case-insensitive search |
91+
| `renderError` | `(error: unknown) => React.ReactNode` | - | Custom error renderer function |
92+
| `scrollContainerRef` | `React.RefObject<Element \| null>` | - | **Required for container-scroll only**. Reference to the scroll container element |
5893

5994
### UnipikaSettings
6095

0 commit comments

Comments
 (0)