How to compose react-textarea-autosize with reactions
It is now clear to me that mixins and inheritance are generally considered bad, and composition is the way from which:
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
Now, what if you find two components that specialize in different things and you want a component that is the result of mixed behavior? For example, I need a text area that grows automatically when the text goes beyond the start lines and allows mentions inside (aka. Mix react-mentions
with react-textarea-autosize
)
- How should I make up both ways of working?
- Should I code the new component by copying / compressing the inner code from both components?
- What is the ReactJs way to compose in such scenarios?
source to share
I faced the same problem. With react-mention, you don't need to use answer-text-autosize, as you can achieve the same behavior with CSS that can generate a generated text area automatically. Consider the following example
<MentionsInput
value={content}
placeholder="Add a comment"
onChange={this.onChange}
className="mentionWrapper">
<Mention
trigger="@"
data={users}
className="mentionedFriend"
displayTransform={(id, display) => '@${display}'}
/>
</MentionsInput>
For this I used the following styles
.mentionWrapper {
width: 100%;
background: transparent;
font-size: 0.9rem;
color: #a9b5c4;
}
.mentionWrapper .mentionWrapper__control {
border-radius: 25px;
border: 1px solid #3a546f;
min-height: 45px;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__highlighter {
padding: 0.7rem 1rem;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__input {
padding: 0.7rem 1rem;
outline: 0;
border: 0;
resize: none;
outline: none;
font-size: 0.9rem;
color: #7288a3;
border-color: #3a546f;
overflow: hidden;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__input::placeholder {
color: #7288a3;
}
.mentionWrapper__suggestions {
background-color: rgba(0, 0, 0, 0.6) !important;
padding: 10px;
-webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
border-radius: 0.8rem;
}
.mentionWrapper__suggestions .mentionWrapper__suggestions__list {
font-size: 14px;
}
.mentionWrapper
.mentionWrapper__suggestions
.mentionWrapper__suggestions__item--focused {
color: #ffffff;
border-bottom: 1px solid #3a546f;
font-weight: 600;
}
.mentionedFriend {
color: #7288a3;
text-decoration: underline;
}
The key point here is that I have applied a 45px minimum height to "control" the div that is added by the React to Mention package. This will give you the attached result.
source to share