CODEWITHSUNDEEP
reactjs
I3art0sh
I3art0sh

Reputation: 23

Is possible to build compound component with separated files? REACT

I'm trying to understand React's compound pattern. In all exercises all components are in one file. Is it possible to build component with that pattern with external components?

I would achieve that scenario:

src: components: Main Component1 Component2 Component3

// ONE FILE Main.js import {CompoundComponent1, CompoundComponent2, CompoundComponent3} './foo'

const Main = () => {
 const [on, setOn] = React.useState(false)
 const toggle = () => setOn(!on)
 const CompoundComponent1 = Component1;
 const CompoundComponent2 = Component2;
 const CompoundComponent3 = Component3;

 return <Switch on={on} onClick={toggle} />
}

Main.C1 = CompoundComponent1
Main.C2 = CompoundComponent2
Main.C3 = CompoundComponent3

// ONE FILE END


App.js

const App = () => {
<Main>
<Main.C1>FOO</Main.C1>
// etc.
</Main>
}

Upvotes: 0

Views: 439

Answers (1)

I3art0sh
I3art0sh

Reputation: 23

I think that i found solution.

import * as React from 'react'
import {Switch} from '../switch'
import {ToggleOn} from './02/ToggleOn'
import {ToggleOff} from './02/ToggleOff'
import {ToggleButton} from './02/ToggleButton'

function Toggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)

  return <Switch on={on} onClick={toggle} />
}

Toggle.ToggleOn = ToggleOn
Toggle.ToggleOff = ToggleOff
Toggle.ToggleButton = ToggleButton

function App() {
  return (
    <div>
      <Toggle>
        <Toggle.ToggleOn>Turn ON</Toggle.ToggleOn>
        <Toggle.ToggleOff>Turn OFF</Toggle.ToggleOff>
        <Toggle.ToggleButton />
      </Toggle>
    </div>
  )
}

export default App

In separated files:

export const ToggleButton = ({on, toggle}) => (
  <Switch on={on} onClick={toggle} />
)


export const ToggleOn = ({on, children}) => {
  if (on) {
    return children
  }
  return null
}

Upvotes: 2

Related Questions