Inner Block Slider: Optionally manage state externally

[mattheu]

I would like to use the Inner Block Slider components to build a Tab block - it's not quite what it's intended for but very close :)

In order to achieve the functionality I need, I would like to be able to access the index of the currently active slide, both to get and set the value, so that I can highlight the active tab button, and focus the correct slide when clicked.

The only way I can think to do this is to provide the option to manage the state externally. Feels a bit... verbose? The variable/function naming especially. But works well.

Would appreciate any thoughts.

[roborourke]

I think hoisting state is pretty normal. Often this kind of thing can be made less prescriptive by using function props as children. So for instance you could pass your own navigation as a prop which is a function that receives all the props navigation needs to function e.g. the callbacks and state.

I think you'd typically have a component with hoisted state, e.g. you pass state management as props, and this current example would be a separate wrapped component that does the state management for you. It might be unnecessarily complicated to try and do it all with one component.

[mattheu]

@roborourke Is this more in line with what you're thinking? A default container component that handles state, and a separate component that doesn't? This certainly solves my requirement as I can just pull in the lower level component.

[roborourke]

Basically yeah. Keeps the component state a bit simpler so it’s either internally managed or set by props. I think this is good now, just need to update the docs.

[mattheu]

I've updated this.

One further addition - in order to actually expose this new component to an user of the library, I have exported a new component InnerBlockSliderStateless. Any thoughts on this approach or naming? The alternative to doing this is to import from src, but that requires having all dependencies configured.

[roborourke]

Yeah I'm not much for getting too bogged down in naming. Only other idea that comes to mind is the sort of dot naming convention for sub or related components e.g. InnerBlockSlider.Controlled or InnerBlockSlider.StateLess

[mattheu]

I like this a lot. Both naming 'controlled' and exposing with dot naming as it's much neater. Updating