search

finnfiddle / potion

React components for declaratively composing animated, interactive visualizations.
https://potion.js.org/
MIT License
184 stars 5 forks source link

How to render Text from data? #2

Closed wilkerlucio closed 6 years ago

wilkerlucio commented 7 years ago

Hello, I'm trying to figure how to print text from data, this is how I'm trying to do it:

<Collection data={nodes}>
  <Text datum={p => p.datum.id}
        dx={p => p.index * 25 + 12.5}
        textAnchor="middle"/>
</Collection>

I saw in the docs I need to send the text as children, but how to get it from the datum?

finnfiddle commented 7 years ago

you're right I believe this isnt possible currently. Ill work something out in the next release. we can either have an extra prop on the Text component which overrides the children prop if defined or we can have optional Function as Child Component. Eg:

<Text>{(props) => props.datum.id}</Text>

Which do you think is better?

finnfiddle commented 7 years ago

or we can move away from having children at all and just use a specific custom prop for the text value, eg: <Text value="lorem" />

wilkerlucio commented 7 years ago

I like the value prop approach, most of the texts are just a print operation. The one on children sounds interesting, but at same I'm not sure how you would handle that, is it easy to parse functions inside of children?

finnfiddle commented 7 years ago

yeah I guess its more simple having a value prop

finnfiddle commented 6 years ago

@wilkerlucio the library has been completely rewritten (and renamed) and has a much simpler API now as a result of switching to a render props approach. It would be great to get feedback on it if you have any. The new docs can be found here: http://numberpicture.com/build