How to emulate react subcomponent pattern in purescript

Ecosystem
#1

Hello there!

While trying to move a React project to purescript I encountered the useful React subcomponent pattern. Here’s an example of how that might look like:

to summarize, this is just namespacing in react. That just looks like this:

const SomeList = (
    <List>
        <List.Header>
            I'm a header
        </List.Header>
        <List.Item>
            Item 1
        </List.Item>
        <List.Item>
            Item 2
        </List.Item>
        <List.Item>
            Item 2
        </List.Item>
    </List>
)

My underlying problem is if I could actually port this pattern to Purescript. The way I apply it is to assign a component to the main function component as a prop:

List.Item = Item

Is it possible to do this in purescript?

I’m also interested if anyone uses this pattern in their purescript react codebase, and if so, how do they approach this.

1 Like
#2

I wouldn’t recommend trying to assign extra props to the actual react component, because in PureScript, unlike JS, most things don’t behave like objects where you can just assign whatever props to them and then read them back off later. Instead, I’d recommend just putting the components in the same module.

3 Likes