react-paper-bindings
react-paper-bindings copied to clipboard
Improve demo and think about best practices and better API
Just thinking ... in the demo, most of the tool functionality is split out into higher order components, which add props directly to the Paper component.
export default compose(
withHistory,
withFullscreen,
withTools,
withMoveTool,
withSelectTool,
withPenTool,
withCircleTool,
withRectangleTool,
withDeleteTool,
)(Paper)
There are a few problems with this approach:
- it's hard to track all the props injected
- too many props on the Paper component
- order is important, because some HOCs depend on other HOC's props
- it's messy and not really reusable
I'm thinking something like this:
import { View, Layer, Raster, Tools, MoveTool } from 'react-paper-renderer'
const Paper = ({ width, height, src }) => {
return (
<View width={width} height={height}>
<Tools>
<MoveTool />
</Tools>
<Layer>
<Raster source={src} />
</Layer>
</View>
)
}
Maybe render props API can help us? Not really sure ...