Reactletteroverflow NPM

ReactLetterOverflow

This lib is intended for people who need text to be delimited based on the size of the parent container whose size is not necessarily passed in pixels but in any type of measurement

Installation

   yarn add reactletteroverflow

   npm install reactletteroverflow

Getting start

basic example of use

import { ReactLetterOverflow } from "reactletteroverflow";

<ReactLetterOverflow>
   {(props) => (
      <p ref={props}>
         Hello word
      </p>
   )}
</ReactLetterOverflow>

Complete example

a complete example of how to use it to get the lib to work completely

NOTE: It's worth remembering that for now the lib will limit content in just one line

import { ReactLetterOverflow } from "reactletteroverflow";

funtion App () {

   return (
      <div style={{
         width: '50%', //here it can be any value
      }}>
         <ReactLetterOverflow>
            {(props) => (
               <p ref={props}>
                  Hello word
               </p>
            )}
         </ReactLetterOverflow>
      </div>
   );
}

export default App;

Use with state

If your content is in a state, follow the step below

import { useState } from "react";
import { ReactLetterOverflow } from "reactletteroverflow";

funtion App () {

   const [content, set_content] = useState('');

   return (
      <div style={{
         width: '50%', //here it can be any value
      }}>
         <ReactLetterOverflow
            content={content}
         >
            {(props) => (
               <p ref={props}>
                  {content}
               </p>
            )}
         </ReactLetterOverflow>
      </div>
   );
}

export default App;

API

Property	Default value	Type	Definition
enable_title?	true	Boolean	specifies whether, when the content is delimited, whether the entire content should be in the title property
delimiter?	...	String	With this prop you can modify the delimiter that goes at the end of the content, e.g: '...', '...se more'
content?	undefined	String	Property used when your content is in a state

Future intentions

That it is possible to specify how many lines the content will be delimited in and that the delimiter property can have click events that when triggered make it possible to release all the content for viewing