Negotiable Paleobotanist Missions

    react-texty

    0.6.0 • Public • Published

    react-texty

    A straight forward text component with tooltip support when it's truncated

    Install

    # Yarn 
    yarn add react-texty
     
    # NPM 
    npm install --save react-texty

    Props

    • tagName string Tag name for the component, defaults to div
    • children node, Should be string or inline element
    • tooltip node Tooltip for the truncated text if set, or the children will be used
    • tooltipClassName string Classname for the tooltip
    • tooltipStyle object Custom style of the tooltip
    • tooltipMaxWidth number Max width of the tooltip
    • showDelay number Delay milliseconds to show when mouse enter, defaults to 150
    • hideDelay number Delay milliseconds to hide when mouse leave, defaults to 150
    • arrowClassName string Classname for the arrow
    • hideArrow bool Whether to show the tooltip arrow, defaults to false
    • placement top|top-start|top-end|bottom|bottom-start|bottom-end The placement of the tooltip, defaults to top

    Learn more at https://nihgwu.github.io/react-texty/

    Usage

    import Text from 'react-texty'
    // import the styles
    import 'react-texty/styles.css'
     
    // just use it as a normal text node
    <Text>Hello world</Text>
    <Text tagName="a">Hello world</Text>
    <Text tooltip="Something else">Hello world</Text>

    License

    MIT © Neo Nie

    Install

    npm i react-texty

    DownloadsWeekly Downloads

    2,272

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    25.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • nihgwu