A helper is used to truncate a long string.

---
title: truncate
package: '@dwarvesf/react-utils'
description: 'A helper is used to truncate a long string.'
---

`truncate` is a utility to truncate a long string.

## Import

```js
import { truncate } from '@dwarvesf/react-utils'
```

## Return value

This method returns a truncated string with a `...` middle or ending.

## Usage

```jsx
function Example() {
  return (
    <Stack>
      <Box>{truncate('Lorem ipsum dolor sit amet', 20)}</Box>
      <Box>{truncate('Lorem ipsum dolor sit amet', 10, true)}</Box>
    </Stack>
  )
}
```

## Masking character

Alternatively, you can use other character instead of `"."`, for example `"*"`:

```jsx
function Example() {
  return (
    <Stack>
      <Box>{truncate('Lorem ipsum dolor sit amet', 10, true, "*")}</Box>
    </Stack>
  )
}
```

## Parameters

The `truncate` method accepts an list of following paramesters:

```js
truncate(str, max, middle)
```

| Name       | Type      | Default | Description                                                               |
| ---------- | --------- | ------- | ------------------------------------------------------------------------- |
| `str`      | `string`  | `_`     | The string to truncate.                                                   |
| `max`      | `number`  | `_`     | The maximum string length.                                                |
| `middle`   | `boolean` | `false` | Whether to put `...` in the middle or at the end of the truncated string. |
| `maskChar` | `string`  | `"."`   | What to use as the masking character when truncating.                     |


Name	Type	Default	Description
`str`	`string`	`_`	The string to truncate.
`max`	`number`	`_`	The maximum string length.
`middle`	`boolean`	`false`	Whether to put `...` in the middle or at the end of the truncated string.
`maskChar`	`string`	`"."`	What to use as the masking character when truncating.

truncate

Import#

Return value#

Usage#

Masking character#

Parameters#