Forem: Defne Eroğlu

Truncate From Middle React Hook

Defne Eroğlu — Mon, 23 May 2022 09:12:19 +0000

I've published my very first npm package use-truncate-from-middle.
It is a react hook, dynamically truncates text from the middle with given ellipsis string (i.e. '...').
It considers the width of the container* and its font style.
In this blog, I am going to talk about the most common methods for truncating text and when you should use the useTruncateFromMiddle hook.
If you want to know the details about how the truncate from middle hook works, you can check my blog post
Calculate Number of Characters Fit into an HTML Element.

The Problem

In web development, if there is not enough space for a text, meaning the width of the container is a fixed value, we truncate it with ellipsis from the end. And it is very easy and safe to make this with pure CSS.
However, sometimes the width value of the container of the text is not set by the frontend team, meaning its value comes from an API call or an SDK or from a configuration file etc.
For such a case we have to include JavaScript along with CSS to truncate a long text dynamically.
In the next section, there are three most common methods to truncate long text with ellipsis from the end.

Traditional Ways To Truncate Text

Case 1: Single Line

I am pretty sure, especially if you are specialized in frontend development, you know by your heart the following css rules for truncating long text:



.truncate {
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Case 2: Multiple Line

If you need to truncate a text not at the first line, but in other lines, for example you have a container element which can hold maximum two lines of string, we use the following css rules:



.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2; // truncates at the second line
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

Case 3: Container Width Is Dynamic

In this case, we have to include Javascript along with CSS.
Especially thanks to CSS-IN-JS pattern it is very easy to make it. See below:



  const truncateStyle = {
    width: `${widthValue}`,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  };

In the code block above, it just dynamically creates a style object with JavaScript.

Truncate Text From Middle

Static Method: Width of The Container Is Known

Function below truncates the text from the middle:



export const truncateFromMiddle = (
  fullStr= '',
  strLen,
  middleStr= '...',
) => {
  if (fullStr.length <= strLen) return fullStr;
  const midLen = middleStr.length;
  const charsToShow = strLen - midLen;
  const frontChars = Math.ceil(charsToShow / 2);
  const backChars = Math.floor(charsToShow / 2);
  return (
    fullStr.substr(0, frontChars) +
    middleStr+
    fullStr.substr(fullStr.length - backChars)
  );
};

The function takes the original text that is fullStr and the parameter strLen that is the desired length should be shown in the UI.
As you see this method works, only if you know the width value of the container or say the frontend developer is the one who sets the width value in the .css file. The frontend developer decides when to truncate and how much to truncate. Therefore, if you know the width value and you need to truncate the text from the middle this kind of solution would be enough for you.

Width of The Container Is Not Set, It Depends On External Data

In this case we cannot set a static maximum strLen value, and truncate the text from middle using the previous truncateFromMiddle function. Because we cannot be sure about when to truncate, and when to show all text. And it is not just about the width actually, it varies depending on the font style as well. If font style value also comes externally, still we cannot be 100% sure when to truncate; for example a text with bold font and with large font size occupies more space than the small font size.
For these cases, you can use the useTruncateFromMiddle hook. It takes ref of the container element and its original text value as parameter.
Below you can see an example result of the hook:

Conclusion

In this blog I tried to show the case where you need the useTruncateFromMiddle hook.
You can download and try the package if you have the opportunity or when you really need it. I plan to update the package in line with your feedback. Thank you for reading... Best.

*Container: i.e., div, span, button, read only textarea or any other non editable DOM elements.

Next.js with Elasticsearch

Defne Eroğlu — Mon, 25 Oct 2021 18:57:07 +0000

I would like to start this post, by saying 'I wish Elasticsearch Cloud was free with no time limit, even just with limited features'...
Why am I saying that; because so I could add full text search capability to filter blogs on my blog site that I developed with Next.js...
Full Text Search queries make the content of the documents searchable.
This ability can be used to make searchable the content of blogs in your website, and if you provide search blogs or filter blogs kind of feature in your application, when your user enters words or phrases that appear anywhere in the content of blogs, even if the entered search word is in code blocks, the related blogs can be obtained and shown as search results to your users.
In order to do that, we need to index our blogs, .md or .mdx files, to Elasticsearch, and then, by using Elasticsearch's Rest Api, we provide full text search capability in our application.
I wrote an article on this subject explaining how you can provide full text search capability in your Next.js blog application, you can read from here

Leetcode MinStack Design Problem: JavaScript Low Level Solution

Defne Eroğlu — Tue, 22 Dec 2020 12:32:30 +0000

With this post, I would like to share a low level Javascript solution for one of the most popular design problems from leetcode it is called MinStack.The problem expect a stack that supports push, pop, top, and retrieving the minimum element in constant time.
Here instead of using Javascript's length, Math.min(), push, pop etc. , the expected functions are written at the low level as possible.

/**
 * initialize data structure
 */
var MinStack = function () {

    this.stack = [];
    this.minVals = [];
    this.count = 0;
    this.min = Number.MAX_VALUE;
};

/** 
 * @param {number} x
 * @return {void}
 */
MinStack.prototype.push = function (x) {

    if (x < this.min || this.count === 0) {
        this.min = x;
    }

    this.minVals[this.count] = this.min;
    this.stack[this.count] = x;
    this.count++;

};

/**
 * @return {void}
 */
MinStack.prototype.pop = function () {

    delete this.stack[this.count - 1];
    delete this.minVals[this.count - 1];
    this.min = this.minVals[this.count - 2];
    this.count--;


};

/**
 * @return {number}
 */
MinStack.prototype.top = function () {

    return this.stack[this.count - 1]

};

/**
 * @return {number}
 */
MinStack.prototype.getMin = function () {

    if (this.count > 0)
        return this.minVals[this.count - 1];

    else if (this.count === 0)
        return this.MinVals[0]
};

MinStack:

stack: is a storage of the values, in other words, the stack
minVals: is a storage for the minimum Values; it is needed because after pop() operation we might delete the minimum value of the stack so the minimum values are also should be tracked.
count: instead of using Javascript's length we can use this.count in order to set the last index and get the value of stack's last value.
min: this is a kind of initial and global minimum value, that starts with the maximum numeric value in Javascript.

push(x):

Adds an element to the stack. Does not return any value.
Here, while adding new element(x) to the stack we also check that whether new element is less than the this.min value. Also include the case that, if the stack is empty, means this.count===0, then of course the first element of this.minVals is also equal to the new element(x). Both length of the stacks are equal which is the value of count.
Then instead of using Javascript's build in push() function, we say the last element of the stack is the new element:

...

    if (x < this.min || this.count === 0) {
        this.min = x;
    }

    this.minVals[this.count] = this.min;
    this.stack[this.count] = x;
    this.count++;

pop():

Removes the last item from the stack. We are not going to use pop() function of Javascript. We just going to delete the last item from the stack. We need to consider that, maybe the value which is going to be removed is the minimum value of the array. So actually thats why we've needed an extra minVals stack instead of only with a this.min. In order to catch the new state of the stack, we need to also delete the last item of the minVals stack. But!
We also should remember that when we add new value to the stack with our push(x) function that is given above. There, we compare the x value with the this.min value, thats why this.min value is no longer the last item of the this.minVals stack but the previous one. And lastly, since we removed the last item from stack we should decrease the count number, so that when next time we do another operation, it should follow the last index of the stack with the count value.

...
    delete this.stack[this.count - 1];
    this.min = this.minVals[this.count - 2];
    delete this.minVals[this.count - 1];
    this.count--;

top():

Returns the last item of the stack.
Here the length of the stack is equal to this.count and the last item of the stack is at the index of this.count-1:

 return this.stack[this.count - 1]

getMin():

Returns the minium value of the stack. Here instead of scanning the whole stack, since we already set the minimum value to the minStack all the time. We can comfartably return the last item of minStack. Remember the last item's index is this.count-1; but if we are already at count=0 then we simply should return the first value of the minStack:

...
if (this.count === 0)
        return this.MinVals[0]
    else
        return this.minVals[this.count - 1];