Usage
import { Textarea } from '@loomhq/lens'
<Textarea />
Rows
<Textarea
rows={2}
value={demoText.medium}
onChange={() => console.log()}
/>
Placeholder
<Textarea placeholder='Placeholder' />
Sizes
<Distribute direction="column" gap="small">
<Textarea placeholder="small" size="small" />
<Textarea placeholder="medium" size="medium" />
</Distribute>
Resize
<Distribute direction="column" gap="small">
<Textarea resize="none" placeholder="none" rows={1} />
<Textarea resize="both" placeholder="both" rows={1} />
<Textarea resize="horizontal" placeholder="horizontal" rows={1} />
<Textarea resize="vertical" placeholder="vertical" rows={1} />
</Distribute>
Disabled
<Textarea
isDisabled
rows={2}
value={demoText.long}
onChange={() => console.log()}
/>
Forwarding refs
Use the ref
prop to access the DOM node.
More about forwarding refs.
class FocusThisInput extends React.Component {
render() {
return (
<Distribute direction="column" gap="small">
<Button onClick={() => this.myInput.focus()}>Focus this Textarea</Button>
<Textarea
ref={input => {
this.myInput = input
}}
/>
</Distribute>
)
}
}
Props
size
oneOf: 'small', 'medium'
'medium'
resize
oneOf: 'none', 'both', 'horizontal', 'vertical'
'both'