Giter Club home page Giter Club logo

react-tag-cloud's Introduction

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

react-tag-cloud's People

Contributors

ijzerenhein avatar engmagdy87 avatar cathal-killeen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.