React component design

Question

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.

Are you saying you want your country selector to be two React components that might both exist within HTML (ie two ReactDOM.render() calls), or the whole app is React and you want the components to exist anywhere in the app? — Aaron Beall
– Aaron Beall, Commented May 17, 2016 at 18:47
Not sure I quite follow... basically I don't want users to have to wire the two dropdowns together. e.g. maintain the selected state of the country dropdown + pass that value to the region dropdown. Instead, I'd like to allow users to just include that single <CountryRegions /> component, containing the two dropdowns in whatever markup they want. That'd make the component really easy to "drop-in" into a React application. — benjamin.keen
– benjamin.keen, Commented May 17, 2016 at 19:06
Ok so it sounds like the components exist in the same React application, I just wasn't sure if you were saying you wanted React elements mixed in a traditional HTML page within separate HTML containers. — Aaron Beall
– Aaron Beall, Commented May 17, 2016 at 19:10

nvartolomei · Accepted Answer · 2016-05-17 19:23:58Z

2

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.

answered May 17, 2016 at 19:23

nvartolomei

1,50512 silver badges16 bronze badges

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

1 Comment

benjamin.keen Over a year ago

Excellent, thanks nvartolomei. Yeah, that looks like it'll fit the bill!

Collectives™ on Stack Overflow

React component design

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related