donnikitos / react-component-truncated

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

React Component - <Truncated />

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 or yarn:

# 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

import Truncated from 'react-component-truncated';

// use in Component
function App(props) {
	return (
		<>
			This ETH wallet address needs to be truncated:{' '}
			<Truncated style={{ width: 210 }}>
				0x86F03eBCE80128d1C815b7729AeE4ADE12a77e8A
			</Truncated>
		</>
	);
}

License

MIT Copyright (c) 2021 Nikita 'donnikitos' Nitichevski.