How to develop Reusable Bootstrap-like Components-CodePudding

React bootstrap and other similar bootstrap libraries provide something like

import Modal from '...';

whereas Modal can be unpacked further into:

const { Header, Title, Description } = Modal;

Although Modal itself is a wrapper component.

Sample of their use-case is as such:

<Modal someProps={someValues}>
  <Modal.Title>Some Title</Modal.Title>
  <Modal.Content>Some Content</Modal.Content>
</Modal>

How does one develop something like that?

My initial thought was something like this:

const Title = ({children}) => (<something>{children}</something>);

const Content = ({children}) => (<something>{children}</something>);

export {
  Title,
  Content,
};

====================

import Modal from '...';
--or--
import { Title, Content } from '...';

but this method will cause Modal to not be usable by itself. How does this work? Does anyone have an example?

Thanks!

CodePudding user response：

I have questions rather than an answer, but I cannot comment on your question yet.

Can you not define Modal similar to how you defined Title and Content? Then, you would be able to use Modal by itself, wouldn't you? Or, do you mean something else by that?

CodePudding user response：

Yes it's little bit tricky but here I am.

const Title = ({children}) => (<something>{children}</something>);

const Content = ({children}) => (<something>{children}</something>);

const Components = {
  Title: ({children}) => (<something>{children}</something>),
  Content: ({children}) => (<something>{children}</something>),
}

====== OR =======

const Components = {
  Title: Title,
  Content: Content,
}
export default Components;

And how to use them yet very simple.

<Components.Title />
<Components.Content />