CODEWITHSUNDEEP
reactjs
benjamin.keen
benjamin.keen

Reputation: 1984

React component design

I'm porting a small script over to React. It's a simple country-region-selector plugin that ties together a country dropdown and a region dropdown, so the latter always shows the relevant regions for the selected country. See: https://github.com/benkeen/country-region-selector

Thing is, I can't quite fathom the best way to componentize this using React. I need the two key elements (the country dropdown and the region dropdown) to be completely independent, so a user can choose exactly where the two dropdowns appear in the DOM + the surrounding markup. But I want all the inner-workings (i.e. how the two components are tied together) to be hidden from view. I was thinking maybe something like this...

<CountryRegions>
   <span>arbitrary markup here</span>
   <CountryDropdown />
   <p>
       <RegionDropdown />
   </p>
</CountryRegions>

... but I'm hazy on how the actual implementation of that would work. Any ideas / better suggestions? Hope this question is clear.

Upvotes: 2

Views: 174

Answers (1)

nvartolomei
nvartolomei

Reputation: 1505

You can share something between components using context. Basically CountryRegions component will provide a context that every child can use.

CountryDropdown and RegionDropdown can use the provided context as long as they are child of CountryRegions component, no matter how deeply nested.

Upvotes: 2

Related Questions