import Ariana from 'ariana';

//In Main.jsx
const mainCallbacks = {
  handleFiltering: filterInput => this.setState(filterInput),
  log: s => alert(s)
};

//In Main.jsx
const wrapper = Ariana(mainCallbacks);

//In Main.jsx
<Filters
   text={this.state.filterText}
   stockOnly={this.state.inStockOnly}
   ariana={wrapper}
   />

//In Filters.jsx
const { ariana } = this.props;

ariana.handleFiltering({
  filterText: "Ariana"
});

//In Table/index.jsx
const { ariana } = this.props;

const tableCallbacks = {
  handleSorting: newSort => this.setState(newSort),
  log: () =>
    ariana.log(
      "Wow... Table/index.jsx component's 'log' callback has been called."
    ) //overload parent's 'log' callback
};

//add a child wrapper to handle callbacks of this child component
const lisa = ariana.child(tableCallbacks);

//pass lisa(ariana's child) via props to this component's child (Header.jsx)
<Header lisa={lisa} />

//In Header.jsx
<button
  onClick={() => {
    /*use the the parent component's callback*/
    lisa.handleSorting({
      sort: {
        by: column,
        asc: !true
      }
    });
    /*use the the grandparent component's callback*/
    lisa.parent.log(
      "Jeez... Main.jsx component's 'log' callback has been called."
    ); //it could be possible to do lisa.parent.parent.[...].log()
  }}
>

const mainCallbacksCopy = ariana.eject();