Limit number of lines in textarea and Display line count using jQuery

For React functional component that sets new value into state and forwards it also to props:

const { onTextChanged,  numberOfLines, maxLength } = props;
const textAreaOnChange = useCallback((newValue) => {
        let text = newValue;
        if (maxLength && text.length > maxLength) return
        if (numberOfLines) text = text.split('\n').slice(0, numberOfLines ?? undefined)
        setTextAreaValue(text); onTextChanged(text)
    }, [numberOfLines, maxLength])

html:

<textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>

js:

$(document).ready(function(){

    var lines = 10;
    var linesUsed = $('#linesUsed');

    $('#countMe').keydown(function(e) {

        newLines = $(this).val().split("\n").length;
        linesUsed.text(newLines);

        if(e.keyCode == 13 && newLines >= lines) {
            linesUsed.css('color', 'red');
            return false;
        }
        else {
            linesUsed.css('color', '');
        }
    });
});

fiddle: http://jsfiddle.net/XNCkH/17/

Here is little improved code. In previous example you could paste text with more lines that you want.

HTML

<textarea data-max="10"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span></div>

JS

jQuery('document').on('keyup change', 'textarea', function(e){

        var maxLines = jQuery(this).attr('data-max');        
        newLines = $(this).val().split("\n").length;

        console.log($(this).val().split("\n"));

        if(newLines >= maxLines) {
            lines = $(this).val().split("\n").slice(0, maxLines);
            var newValue = lines.join("\n");
            $(this).val(newValue);
            $("#linesUsed").html(newLines);
            return false;
        }

    });