Nominal Package Missing

    react-tag-cloud
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.3 • Public • Published

    THIS REPOSITORY IS NO LONGER MAINTAINED

    Looking for an alternative? Please have a look at react-tagcloud.

    If you are interested in maintaining this repository (and taking ownership of it), please reach out to me here.

    react-tag-cloud ☁️

    Create beautiful tag/word clouds using React. Uses the wonderful d3-cloud under the hood.

    react-tag-cloud-image

    View live demo here (edit code)

    Installation

    npm install react-tag-cloud
    or
    yarn add react-tag-cloud
    

    Usage

    import TagCloud from 'react-tag-cloud';
    import randomColor from 'randomcolor';
    
    class MyCloud extends Component {
      render() {
        return (
          <TagCloud 
            style={{
              fontFamily: 'sans-serif',
              fontSize: 30,
              fontWeight: 'bold',
              fontStyle: 'italic',
              color: () => randomColor(),
              padding: 5,
              width: '100%',
              height: '100%'
            }}>
            <div style={{fontSize: 50}}>react</div>
            <div style={{color: 'green'}}>tag</div>
            <div rotate={90}>cloud</div>
            ...
          </TagCloud>
        );
      }
    }

    Documentation

    <TagCloud> props:

    name description type default
    style.fontSize Font size needed for calculating layout Function/Number 20
    style.fontFamily Font family needed for calculating layout Function/String serif
    style.fontWeight Font weight needed for calculating layout Function/Number normal
    style.fontStyle Font style needed for calculating layout Function/String normal
    style.padding Padding between tags (px) Function/Number 1
    style.color Color to be used by tags Function/String (none)
    rotate Rotation in degrees Function/Number 0
    spiral Spiral Function/String archimedean
    random Randomizer function Function Math.random

    Any component can be used as a child component. TagCloud scans the child components for the following props for its layout calculation:

    name description type default
    style.fontSize Font size needed for calculating layout Function/Number 20
    style.fontFamily Font family needed for calculating layout Function/String serif
    style.fontWeight Font weight needed for calculating layout Function/Number normal
    style.fontStyle Font style needed for calculating layout Function/String normal
    style.padding Padding between tags (px) Function/Number 1
    style.color Color to be used by tag Function/String (none)
    rotate Rotation in degrees Function/Number 0

    Examples

    Resources

    License

    MIT

    Cool?

    Do you think this cool and useful? Consider buying me a coffee!
    Buy Me A Coffee

    Install

    npm i react-tag-cloud

    DownloadsWeekly Downloads

    1,301

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    26 kB

    Total Files

    9

    Last publish

    Collaborators

    • ijzerenhein