Photo by Juanjo Jaramillo on Unsplash
ReactJs: Textarea Component With Word Limit
Create a Textarea that allows only a number of characters to be inserted
Renders a Textarea component with a word limit.
Use the
useState()
hook to create a state variable, containing content and wordCount. Use the value prop and 0 as the initial values respectively.Use the
useCallback()
hooks to create a memorized function,setFormattedContent
, that usesString.prototype.split()
to turn the input into an array of words.Check if the result of applying
Array.prototype.filter()
combined with Boolean has a length longer than the limit. If it does, trim the input. Otherwise return the raw input, updating the state accordingly in both cases.Use the
useEffect()
hook to call thesetFormattedContent
method on the value of the content state variable during the initial render.Bind the onChange event of the
<textarea>
to callsetFormattedContent
with the value ofevent.target.value
React
const LimitedWordTextarea = ({ rows, cols, value, limit }) => {
const [{ content, wordCount }, setContent] = React.useState({
content: value,
wordCount: 0
});
const setFormattedContent = React.useCallback(
text => {
let words = text.split(' ').filter(Boolean);
if (words.length > limit) {
setContent({
content: words.slice(0, limit).join(' '),
wordCount: limit
});
} else {
setContent({ content: text, wordCount: words.length });
}
},
[limit, setContent]
);
React.useEffect(() => {
setFormattedContent(content);
}, []);
return (
<>
<textarea
rows={rows}
cols={cols}
onChange={event => setFormattedContent(event.target.value)}
value={content}
/>
<p>
{wordCount}/{limit}
</p>
</>
);
};