Support React Native by allow customize the default container

[gasolin]

react-tagcloud already support custom renderer, so we can use custom renderer to render Text in react native. But React Native use <View> instead of <div> as the default container.

What's missing is the way to customize the default container, ex:

import { Text, View } from 'react-native'
import { TagCloud } from "react-tagcloud"

// PROPOSED one
const customContainer(props) => {
  <View>
    {props.children}
  </View>
}

const customRenderer = (tag, size, color) => {
      return (
        <Text
          key={tag.value}
          style={{
             color: 'xxx',
             fontSize: 'xxx',
          }}
        >
          {tag.value}
        </Text>
      )
    };

const data = [
  { value: "JavaScript", count: 38 },
  { value: "React", count: 30 },
  { value: "Nodejs", count: 28 },
  { value: "Express.js", count: 25 },
  { value: "HTML5", count: 33 },
  { value: "MongoDB", count: 18 },
  { value: "CSS3", count: 20 }
];

return(
  <TagCloud
    tags={data}
    renderer={customRenderer}
    // PROPOSED one
    container={customContainer}
    style={{flexDirection:'row', flexWrap:'wrap', alignItems: 'center', 
     justifyContent:'center'}}
  />
)

@madox2 how do you think?

[madox2]

Thanks for the feedback, I like the idea! It would be also nice to export default renderer/container for React Native. Then it could be conveniently used, for example:

import { TagCloud } from "react-tagcloud"
import { defaultRenderer, defaultContainer } from "react-tagcloud/rn"

// ...

<TagCloud
  tags={data}
  renderer={defaultRenderer}
  container={defaultContainer}
/>

[UtilExe]

Hi @madox2 Any updates or news on this? Thanks in advance!

[madox2]

I've just added support for react native: https://github.com/madox2/react-tagcloud#react-native