use reduceRight for saner usage down the array

example-js/src/App.js

@@ -23,6 +23,15 @@ const App = () => {
   const MasterProvider = composeWrappers([
     props => <P1.Provider value={{p1: 'foo'}} children={props.children} />,
     props => <P2.Provider value={{p2: 'bar'}}>{props.children}</P2.Provider>,
+    props => {
+      const p1 = React.useContext(P1);
+      const p4 = React.useContext(P4);
+      return <>
+        P1 from wrapper: {p1.p1}
+        P4 from wrapper: {p4.p4}
+        {props.children}
+      </>
+    },
     props => <P3.Provider value={{p3: 'baz'}}>{props.children}</P3.Provider>,
     props => <P4.Provider value={{p4: 'qaz'}}>{props.children}</P4.Provider>,
   ]);

example-js/src/App.test.js

@@ -6,6 +6,8 @@ test('JS', () => {
   const { getByText } = render(<App />);
   expect(getByText('P1: foo', {exact: false})).toBeInTheDocument();
   expect(getByText('P2: bar', {exact: false})).toBeInTheDocument();
+  expect(getByText('P1 from wrapper: foo', {exact: false})).toBeInTheDocument();
+  expect(getByText('P4 from wrapper: p4', {exact: false})).toBeInTheDocument();
   expect(getByText('P3: baz', {exact: false})).toBeInTheDocument();
   expect(getByText('P4: qaz', {exact: false})).toBeInTheDocument();
 });

example-ts/src/App.test.tsx

@@ -6,6 +6,8 @@ test('TS', () => {
   const { getByText } = render(<App />);
   expect(getByText('P1: foo', {exact: false})).toBeInTheDocument();
   expect(getByText('P2: bar', {exact: false})).toBeInTheDocument();
+  expect(getByText('P1 from wrapper: foo', {exact: false})).toBeInTheDocument();
+  expect(getByText('P4 from wrapper: p4', {exact: false})).toBeInTheDocument();
   expect(getByText('P3: baz', {exact: false})).toBeInTheDocument();
   expect(getByText('P4: qaz', {exact: false})).toBeInTheDocument();
 });

example-ts/src/App.tsx

@@ -23,6 +23,15 @@ const App: React.FunctionComponent = () => {
   const MasterProvider = composeWrappers([
     props => <P1.Provider value={{p1: 'foo'}} children={props.children} />,
     props => <P2.Provider value={{p2: 'bar'}}>{props.children}</P2.Provider>,
+    props => {
+      const p1 = React.useContext(P1);
+      const p4 = React.useContext(P4);
+      return <>
+        P1 from wrapper: {p1.p1}
+        P4 from wrapper: {p4.p4}
+        {props.children}
+      </>
+    },
     props => <P3.Provider value={{p3: 'baz'}}>{props.children}</P3.Provider>,
     props => <P4.Provider value={{p4: 'qaz'}}>{props.children}</P4.Provider>,
   ]);

index.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export const composeWrappers = (
   wrappers: React.FunctionComponent[]
 ): React.FunctionComponent => {
-  return wrappers.reduce((Acc, Current): React.FunctionComponent => {
+  return wrappers.reduceRight((Acc, Current): React.FunctionComponent => {
     return props => React.createElement(
       Current,
       null,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-compose-wrappers",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Compose multiple React component wrappers",
   "main": "index.js",
   "scripts": {