Skip to content

Commit 1009e4c

Browse files
cee-chencee-chen
committed
Add changelog entry and documentation
1 parent 5921ac7 commit 1009e4c

3 files changed

Lines changed: 82 additions & 0 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## [`master`](https://github.com/elastic/eui/tree/master)
22

3+
- Added `useGeneratedHtmlId` utility, which memoizes the randomly generated ID on mount and prevents regenerated IDs on component rerender ([#5133](https://github.com/elastic/eui/pull/5133))
4+
35
**Bug fixes**
46

57
- Fixed `EuiScreenReaderOnly` positioning issues within scrolling containers ([#5130](https://github.com/elastic/eui/pull/5130))

‎src-docs/src/views/html_id_generator/html_id_generator_example.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import IdGenerator from './html_id_generator';
99
import { HtmlIdGeneratorPrefix } from './html_id_generator_prefix';
1010
import { HtmlIdGeneratorSuffix } from './html_id_generator_suffix';
1111
import { PrefixSufix } from './bothPrefixSuffix';
12+
import { UseGeneratedHtmlId } from './use_generated_html_id';
1213

1314
const htmlIdGeneratorSource = require('!!raw-loader!./html_id_generator');
1415
const htmlIdGeneratorHtml = renderToHtml(IdGenerator);
@@ -26,6 +27,11 @@ const PrefixSufixSource = require('!!raw-loader!./bothPrefixSuffix');
2627
const PrefixSufixHtml = renderToHtml(PrefixSufix);
2728
const prefixSuffixSnippet = " htmlIdGenerator('prefix')('suffix')";
2829

30+
const UseGeneratedHtmlIdSource = require('!!raw-loader!./use_generated_html_id');
31+
const UseGeneratedHtmlIdHtml = renderToHtml(UseGeneratedHtmlId);
32+
const useGeneratedHtmlIdSnippet =
33+
"useGeneratedHtmlId({ prefix: 'Some', suffix: 'id', idFromProps: id })";
34+
2935
export const HtmlIdGeneratorExample = {
3036
title: 'HTML ID generator',
3137
sections: [
@@ -116,5 +122,38 @@ export const HtmlIdGeneratorExample = {
116122
snippet: prefixSuffixSnippet,
117123
demo: <PrefixSufix />,
118124
},
125+
{
126+
title: 'Memoized hook for component use',
127+
source: [
128+
{
129+
type: GuideSectionTypes.JS,
130+
code: UseGeneratedHtmlIdSource,
131+
},
132+
{
133+
type: GuideSectionTypes.HTML,
134+
code: UseGeneratedHtmlIdHtml,
135+
},
136+
],
137+
text: (
138+
<>
139+
<p>
140+
<EuiCode>useGeneratedHtmlId</EuiCode> is a custom React hook that
141+
automatically memoizes the randomly generated ID, preventing the ID
142+
from regenerating on every component rerender. The ID will only
143+
change if the component fully unmounts/mounts, or if you dynamically
144+
pass in new hook arguments.
145+
</p>
146+
<p>
147+
<EuiCode>useGeneratedHtmlId</EuiCode> optionally takes{' '}
148+
<EuiCode>suffix</EuiCode> and <EuiCode>prefix</EuiCode> parameters
149+
with the same behavior as above, as well as an{' '}
150+
<EuiCode>idFromProps</EuiCode> option for components that allow
151+
end-users to set their own custom IDs.
152+
</p>
153+
</>
154+
),
155+
snippet: useGeneratedHtmlIdSnippet,
156+
demo: <UseGeneratedHtmlId />,
157+
},
119158
],
120159
};

‎src-docs/src/views/html_id_generator/use_generated_html_id.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { useState, Fragment } from 'react';
2+
3+
import {
4+
EuiSwitch,
5+
EuiFlexGroup,
6+
EuiFlexItem,
7+
EuiSpacer,
8+
EuiCode,
9+
EuiFormRow,
10+
} from '../../../../src/components';
11+
12+
import { useGeneratedHtmlId } from '../../../../src/services';
13+
14+
export const UseGeneratedHtmlId = () => {
15+
const generatedId = useGeneratedHtmlId({ prefix: 'Some', suffix: 'id' });
16+
17+
const [isChecked, setIsChecked] = useState(false);
18+
const onChange = (e) => setIsChecked(e.target.checked);
19+
20+
return (
21+
<Fragment>
22+
<EuiFlexGroup
23+
justifyContent="flexStart"
24+
gutterSize="m"
25+
alignItems="center"
26+
>
27+
<EuiFlexItem grow={false}>
28+
<EuiFormRow>
29+
<EuiSwitch
30+
label="Clicking me changes component state"
31+
checked={isChecked}
32+
onChange={onChange}
33+
/>
34+
</EuiFormRow>
35+
</EuiFlexItem>
36+
</EuiFlexGroup>
37+
<EuiSpacer size="xl" />
38+
<EuiCode>{generatedId} </EuiCode>
39+
</Fragment>
40+
);
41+
};

0 commit comments

Comments
 (0)