10 examples of 'react bootstrap textarea' in JavaScript

Every line of 'react bootstrap textarea' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
5function PureTextarea(props) {
6 const id = props.id || props.field.join('.');
7 const {containerClassName,
8 textareaClassName,
9 label,
10 errorMessage,
11 options,
12 isRequired,
13 isTouched,
14 isValid,
15 ...otherProps} = props;
16
17 const containerClasses = {
18 required: isRequired,
19 error: isTouched && !isValid
20 };
21
22 otherProps.defaultValue = undefined;
23 return (
24 <div className={cx(containerClassName, containerClasses)}>
25 <label htmlFor={id}>{label}</label>
26 <textarea {...otherProps} id={id} className={textareaClassName} />
27 <aside className='pure-form-message'>
28 {isTouched ? errorMessage : null}
29 </aside>
30 </div>
31 );
32}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

10function shallowTextArea(props = {}) {
11 const textAreaProps = {
12 ...props
13 };
14 return shallow(<TextArea {...textAreaProps} />);
15}
699function CustomTextarea(props, context) {
700 _classCallCheck(this, CustomTextarea);
701
702 var _this = _possibleConstructorReturn(this, (CustomTextarea.__proto__ || Object.getPrototypeOf(CustomTextarea)).call(this, props, context));
703
704 _this.state = {
705 value: props.value,
706 isChanged: !!props.value,
707 isUsed: false,
708 isChecked: true
709 };
710
711 context.register(_this);
712 return _this;
713 }
1726function Textarea(props) {
1727 var _this;
1728
1729 _classCallCheck(this, Textarea);
1730
1731 _this = _possibleConstructorReturn(this, _getPrototypeOf(Textarea).call(this, props));
1732 _this.focus = _this.focus.bind(_assertThisInitialized(_this));
1733 return _this;
1734}
91renderInput() {
92 const { id, value, onChange, onFocus, onBlur, inputProps } = this.props;
93 const allInputProps = {
94 id,
95 value,
96 onChange,
97 onFocus,
98 onBlur,
99 ...combineClassNames(inputProps, styles.textarea),
100 'aria-describedby': `${id}-message`
101 };
102
103 return (
104 <textarea {...allInputProps} />
105 );
106}
6render() {
7 const {
8 inputClass, sizeClass, readOnly, name, value, onChange, id
9 } = this.props;
10 if (readOnly) {
11 return super.render(<div className={sizeClass}>
12 <textarea id={id} rows="8" cols="60" readOnly className={inputClass} name={name} value={value} />
13 </div>);
14 }
15 return super.render(<div className={sizeClass}>
16 <textarea id={id} rows="8" cols="60" className={inputClass} name={name} value={value} onChange={onChange} />
17 </div>);
18}
56render() {
57
58 return (
59 <View style={{ flex: 1 }}>
60 <TextInput ref={c => this._root = c} {...this.prepareRootProps()} multiline={true} placeholderTextColor={ this.getTheme().inputColorPlaceholder} underlineColorAndroid='rgba(0,0,0,0)' />
61 </View>
62 );
63}
18public render() {
19 const { className, label, subLabel, locked, value, required, onClick, forceValidation, errorText, placeholder } = this.props;
20 const classes = [ 'leaf-input' ];
21 const valid = !required ? true : !!value;
22 let val = value || '';
23
24 if (!valid) {
25 classes.push('error');
26 }
27
28 return (
29 <FormGroup>
30 {label &&
31 <Label>
32 {label}
33 {required &&
34 <span className='required'>*</span>
35 }
36 {subLabel &&
37 <FormText color="muted">{subLabel}</FormText>
38 }
39 </Label>
40 }
41 <div className={className}>
42 <TextareaAutosize
43 className={classes.join(' ')}
44 minRows={1}
45 maxRows={5}
46 onBlur={this.handleBlur}
47 onChange={this.handleChange}
48 onClick={onClick}
49 onFocus={this.handleFocus}
50 onKeyDown={this.handleKeydown}
51 placeholder={placeholder}
52 readOnly={locked}
53 spellCheck={false}
54 value={val}
55 />
56 </div>
57 {forceValidation && !valid && errorText &&
58 <span className='validation-error'>{errorText}</span>
59 }
60 </FormGroup>
61 );
62}
67public render() {
68 const className = classNames(
69 'text-area-component',
70 this.props.labelClassName
71 )
72 return (
73 <label className={className}>
74 {this.props.label}
75
76 <textarea
77 autoFocus={this.props.autoFocus}
78 className={this.props.textareaClassName}
79 disabled={this.props.disabled}
80 rows={this.props.rows || 3}
81 placeholder={this.props.placeholder}
82 value={this.props.value}
83 onChange={this.onChange}
84 onKeyDown={this.props.onKeyDown}
85 ref={this.props.onTextAreaRef}
86 onContextMenu={this.onContextMenu}
87 />
88 </label>
89 )
90}
486_isTextarea() {
487 let /** @type {?} */ nativeElement = this._elementRef.nativeElement;
488 // In Universal, we don't have access to `nodeName`, but the same can be achieved with `name`.
489 // Note that this shouldn't be necessary once Angular switches to an API that resembles the
490 // DOM closer.
491 let /** @type {?} */ nodeName = this._platform.isBrowser ? nativeElement.nodeName : nativeElement.name;
492 return nodeName ? nodeName.toLowerCase() === 'textarea' : false;
493}

Related snippets