https://github.com/donnikitos/react-component-truncated

Purely stylistic React.JS component to truncate long strings, like crypto addresses.
https://github.com/donnikitos/react-component-truncated

crypto cryptocoins react react-component reactjs typescript

Last synced: 8 months ago
JSON representation

Purely stylistic React.JS component to truncate long strings, like crypto addresses.

• Host: GitHub
• URL: https://github.com/donnikitos/react-component-truncated
• Owner: donnikitos
• License: mit
• Created: 2022-02-11T11:10:22.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-25T09:06:54.000Z (almost 3 years ago)
• Last Synced: 2025-08-09T14:21:19.282Z (9 months ago)
• Topics: crypto, cryptocoins, react, react-component, reactjs, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-component-truncated
• Size: 35.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Component - ``

![npm](https://img.shields.io/npm/dt/react-component-truncated?style=for-the-badge)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-component-truncated?style=for-the-badge)

![GitHub issues](https://img.shields.io/github/issues/donnikitos/react-clickAway?style=for-the-badge)

![node-current](https://img.shields.io/node/v/react-component-truncated?color=green&style=for-the-badge)

![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/donnikitos/react-component-truncated/dev/typescript/master?color=blue&style=for-the-badge)

A stylistic component to crop long texts, but still show the beginning and the end.

Pretty useful to display crypto tokens or crypto addresses and hashes.

Install with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/):

```bash

# via npm

npm install react-component-truncated

# via yarn

yarn add react-component-truncated

```

## Usage

Use just as a normal HTML element, with the to be truncated contents between the tags.

Accepts all props and attributes of a normal HTMLDivElement.

### Example

```typescript

import Truncated from 'react-component-truncated';

// use in Component

function App(props) {

	return (

		<>

			This ETH wallet address needs to be truncated:{' '}

			

				0x86F03eBCE80128d1C815b7729AeE4ADE12a77e8A

			

		>

	);

}

```

## License

[MIT](LICENSE) Copyright (c) 2021 Nikita 'donnikitos' Nitichevski.