truncate

truncate is a utility to truncate a long string.

Import#

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

Return value#

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

Usage#

Lorem ipsum dolor si...

Lorem i...met

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

Editable Example

Masking character#

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

Lorem i***met

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

Editable Example

Parameters#

The truncate method accepts an list of following paramesters:

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.

Edit this page