1 | ### Examples
|
2 |
|
3 | #### Empty
|
4 |
|
5 | ```js
|
6 | <TextareaAutosize
|
7 | placeholder='try writing some lines'
|
8 | />
|
9 | ```
|
10 |
|
11 | #### Minimum height
|
12 |
|
13 | ```js
|
14 | <TextareaAutosize
|
15 | rows={3}
|
16 | placeholder='minimun height is 3 rows'
|
17 | />
|
18 | ```
|
19 |
|
20 | #### Maximum height
|
21 |
|
22 | using `maxRows`
|
23 | ```js
|
24 | <TextareaAutosize
|
25 | maxRows={3}
|
26 | defaultValue={'this\nis\na\nlong\ninitial\ntext'}
|
27 | />
|
28 | ```
|
29 |
|
30 | using `maxHeight`
|
31 | ```js
|
32 | <TextareaAutosize
|
33 | style={{ maxHeight: 100, boxSizing: 'border-box' }}
|
34 | defaultValue={'this\nis\na\nlong\ninitial\ntext'}
|
35 | />
|
36 | ```
|
37 |
|
38 | #### Prefilled
|
39 |
|
40 | ```js
|
41 | <TextareaAutosize
|
42 | defaultValue={'this\nis\na\nlong\ninitial\ntext'}
|
43 | />
|
44 | ```
|
45 |
|
46 | #### Styled components
|
47 |
|
48 | ```js
|
49 | const StyledTextarea = styled(TextareaAutosize)`
|
50 | font-size: ${({ theme }) => theme.textarea.fontSize};
|
51 | border-color: ${({ theme }) => theme.textarea.borderColor};
|
52 | resize: none;
|
53 | box-sizing: border-box;
|
54 | width: 100%;
|
55 | `;
|
56 |
|
57 | <StyledTextarea
|
58 | defaultValue='Church-key flannel bicycle rights, tofu tacos before they sold out polaroid for free'
|
59 | theme={{
|
60 | textarea: {
|
61 | fontSize: '18px',
|
62 | borderColor: 'green'
|
63 | }
|
64 | }}
|
65 | />
|
66 | ```
|
67 |
|
68 | #### Inner ref
|
69 |
|
70 | ```js
|
71 | initialState = {
|
72 | value: '',
|
73 | /*
|
74 | Saving the "ref" in the state is a bad practice: you should use a `const` or a class property.
|
75 | We're doing it as it's the only way we have to avoid
|
76 | resetting it to "React.createRef()" at every render
|
77 | */
|
78 | ref: React.createRef()
|
79 | };
|
80 |
|
81 | <div>
|
82 | <TextareaAutosize
|
83 | value={state.value}
|
84 | onChange={e => setState({ value: e.currentTarget.value })}
|
85 | placeholder="try writing some lines"
|
86 | ref={state.ref}
|
87 | />
|
88 | {state.ref.current && <div>The textarea contains: {state.ref.current.value}</div>}
|
89 | </div>
|
90 | ```
|