Added react-tagcloud (#8899)

react-tagcloud/react-tagcloud-tests.tsx

@@ -0,0 +1,102 @@
+/// <reference path="../react/react.d.ts" />
+/// <reference path="../react/react-dom.d.ts" />
+/// <reference path="./react-tagcloud.d.ts" />
+
+
+// simple cloud
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {TagCloud, DefaultRenderer} from "react-tagcloud";
+
+let data = [
+    { value: "jQuery", count: 25 }, { value: "MongoDB", count: 18 },
+    { value: "JavaScript", count: 38 }, { value: "React", count: 30 },
+    { value: "Nodejs", count: 28 }, { value: "Express.js", count: 25 },
+    { value: "HTML5", count: 33 }, { value: "CSS3", count: 20 }
+];
+
+ReactDOM.render(
+    // minSize, maxSize - font size in px
+    // tags - array of objects with properties value and count
+    // shuffle - indicates if data should be shuffled (true by default)
+    // onClick event handler has `tag` and `event` parameter
+    <TagCloud minSize={12}
+              maxSize={35}
+              tags={data}
+              shuffle={false}
+              onClick={(tag:string) => console.log("clicking on tag:", tag)} />,
+    document.getElementById("simple-cloud")
+);
+
+
+
+// default-renderer
+
+// DefaultRenderer creates default renderer implementation with custom options
+// usage of tagRenderer option is described in ./custom-tag-renderer.js
+
+// custom props will be applied on each tag component
+const props = {
+    style: {border: "1px solid silver", padding: "5px"},
+    className: "my-tag-class"
+};
+
+// custom random color options
+// see randomColor package: https://github.com/davidmerfield/randomColor
+const colorOptions = {
+    luminosity: "light",
+    hue: "blue"
+};
+
+let customizedDefaultRenderer = new DefaultRenderer({ props, colorOptions });
+
+ReactDOM.render(
+    <TagCloud minSize={12}
+              maxSize={35}
+              tags={data}
+              renderer={customizedDefaultRenderer} />,
+    document.getElementById("default-renderer")
+);
+//
+// custom-renderer.js
+// using custom renderer the default renderer will be overriden
+
+// custom renderer is function which takes tag, computed font size and
+// elemnt key as arguments, and returns react component
+let customRenderer2 = (tag: any, size: number, key: string|number) => {
+    return <span key={key} className={`tag-${size}`}>{tag.value}</span>;
+};
+
+ReactDOM.render(
+    <TagCloud tags={data}
+              minSize={1}
+              maxSize={5}
+              renderer={customRenderer2} />,
+    document.getElementById("custom-renderer")
+);
+
+
+// example from custom-tag-renderer.js
+let data2 = [
+    { value: { name: "google", link: "http://google.com" }, count: 25 },
+    { value: { name: "yahoo", link: "http://yahoo.com" }, count: 18 },
+    { value: { name: "facebook", link: "http://facebook.com" }, count: 38 },
+    { value: { name: "twitter", link: "http://twitter.com" }, count: 30 },
+    { value: { name: "github", link: "http://github.com" }, count: 28 },
+    { value: { name: "npmjs", link: "http://npmjs.com" }, count: 25 },
+    { value: { name: "stackoverflow", link: "http://stackoverflow.com" }, count: 33 }
+];
+
+// with tagRenderer option it is possible to customize rendering of each tag
+// tagRender is a function which takes tag as argument and returns react component or simple string
+const tagRenderer = (tag: any) => (<a href={tag.value.link}>{tag.value.name}</a>);
+
+const customizedDefaultRenderer4 = new DefaultRenderer({ tagRenderer });
+
+ReactDOM.render(
+    <TagCloud minSize={12}
+              maxSize={35}
+              tags={data2}
+              renderer={customizedDefaultRenderer4} />,
+    document.getElementById("custom-tag-renderer")
+);

react-tagcloud/react-tagcloud.d.ts

@@ -0,0 +1,43 @@
+// Type definitions for react-tagcloud v0.4.0
+// Project: https://github.com/madox2/react-tagcloud
+// Definitions by: wassname <https://github.com/wassname/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+///<reference path="../react/react.d.ts"/>
+
+declare namespace ReactTagCloud {
+    interface TagCloudProps extends __React.Props<void> {
+        tags: any[];
+        maxSize: number;
+        minSize: number;
+        shuffle?: boolean;
+        renderer?: Function;
+        className?: string;
+        onClick?: Function;
+    }
+    interface TagCloudClass extends __React.ComponentClass<TagCloudProps> { }
+
+    interface DefaultRendererFactoryOptions {
+        tagRenderer?: Function;
+        colorOptions?: any;
+        props?: any;
+    }
+    interface RendererFunction {
+        (tag: any, size: number, key: string | number, handlers: any): any;
+    }
+    interface DefaultRendererFactory {
+        new (_ref?: DefaultRendererFactoryOptions): RendererFunction;
+        (_ref?: DefaultRendererFactoryOptions): RendererFunction;
+    }
+}
+
+
+// export = TagCloud
+declare module reactTagCloud {
+    const TagCloud: ReactTagCloud.TagCloudClass;
+    const DefaultRenderer: ReactTagCloud.DefaultRendererFactory;
+}
+
+declare module "react-tagcloud" {
+    export = reactTagCloud
+}