implement an export and it's sub export in react

Question

I meet opensourced ts library component and its sub components like following pattern:

import {Box} from 'example/box';

//in react
<Box>
   <Box.Left>
      Left
   </Box.Left>
   <Box.Right>
      Right
   </Box.Right>
</Box>

The question is: how can I implement the Box component in jsx?

Stefan Schmidt · Accepted Answer · 2022-05-18 06:34:57Z

1

The Box component needs to be the export default of the Box.js file. Left and Right are defined as properties of Box:

import React from 'react';

const Box = ({children = null}) =>
    <div>
        {children}
    </div>;

const Left = ({children = null}) =>
    <div>
        {children}
    </div>;

const Right = ({children = null}) =>
    <div>
        {children}
    </div>;

Box.Left = Left;
Box.Right = Right;

export default Box;

answered May 18, 2022 at 6:34

Stefan Schmidt

763 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

implement an export and it's sub export in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related