0

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?

1 Answer 1

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;
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.