From 0ec5b6cb9f5fab1eca69f9f9ce991e9e97045ab4 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Wed, 11 Jul 2018 23:35:41 +0800
Subject: [PATCH] add simple toolkit context wrapper for user

---
 docs/README.md                                |  42 ++++----
 .../examples/remote/remote-search.js          |  67 ++++++------
 .../examples/search/custom-search-value.js    |  76 +++++++------
 .../examples/search/default-custom-search.js  | 100 +++++++++---------
 .../examples/search/fully-custom-search.js    |  72 ++++++-------
 .../examples/search/index.js                  |  76 +++++++------
 .../examples/search/search-formatted.js       |  80 +++++++-------
 .../react-bootstrap-table2-toolkit/README.md  |  12 +--
 .../react-bootstrap-table2-toolkit/index.js   |   6 +-
 .../provider.js                               |  19 ++++
 10 files changed, 272 insertions(+), 278 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-toolkit/provider.js

diff --git a/docs/README.md b/docs/README.md
index 07b8ad2..ba9ea6d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -277,32 +277,30 @@ $ npm install react-bootstrap-table2-toolkit --save
 After installation of `react-bootstrap-table2-toolkit`, you can render search field easily:
 
 ```js
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 //...
 
-<ToolkitContext.Provider>
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Input something at below input field:</h3>
-          <SearchBar { ...props.searchProps } />
-          <hr />
-          <BootstrapTable
-            keyField="id"
-            data={ products }
-            columns={ columns }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+<ToolkitProvider>
+  {
+    props => (
+      <div>
+      <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 ```
 
 ### <a name='onTableChange'>onTableChange - [Function]</a>
diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-search.js b/packages/react-bootstrap-table2-example/examples/remote/remote-search.js
index 1056229..95fbf4e 100644
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-search.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-search.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,6 +23,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
@@ -40,27 +41,25 @@ const columns = [{
 
 const RemoteFilter = props => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ props.data }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          toolkitprops => [
-            <SearchBar { ...toolkitprops.searchProps } />,
-            <BootstrapTable
-              { ...toolkitprops.baseProps }
-              remote={ { search: true } }
-              onTableChange={ props.onTableChange }
-              search={ searchFactory({
-                ...toolkitprops.searchProps
-              }) }
-            />
-          ]
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        toolkitprops => [
+          <SearchBar { ...toolkitprops.searchProps } />,
+          <BootstrapTable
+            { ...toolkitprops.baseProps }
+            remote={ { search: true } }
+            onTableChange={ props.onTableChange }
+            search={ searchFactory({
+              ...toolkitprops.searchProps
+            }) }
+          />
+        ]
+      }
+    </ToolkitProvider>
   </div>
 );
 
@@ -109,27 +108,25 @@ class Container extends React.Component {
 
 const RemoteFilter = props => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ props.data }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          toolkitprops => [
-            <SearchBar { ...toolkitprops.searchProps } />,
-            <BootstrapTable
-              { ...toolkitprops.baseProps }
-              remote={ { search: true } }
-              onTableChange={ props.onTableChange }
-              search={ searchFactory({
-                ...toolkitprops.searchProps
-              }) }
-            />
-          ]
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        toolkitprops => [
+          <SearchBar { ...toolkitprops.searchProps } />,
+          <BootstrapTable
+            { ...toolkitprops.baseProps }
+            remote={ { search: true } }
+            onTableChange={ props.onTableChange }
+            search={ searchFactory({
+              ...toolkitprops.searchProps
+            }) }
+          />
+        ]
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );
diff --git a/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js b/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
index 185d4ef..8df77fa 100644
--- a/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
+++ b/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
@@ -3,7 +3,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { jobsGenerator1 } from 'utils/common';
 
@@ -32,7 +32,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const owners = ['Allen', 'Bob', 'Cat'];
@@ -55,56 +55,52 @@ const columns = [{
   filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
-          <SearchBar { ...props.searchProps } />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
-              <SearchBar { ...props.searchProps } />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );
diff --git a/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js b/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
index 146a6ac..22938d1 100644
--- a/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
+++ b/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -22,7 +22,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const columns = [{
@@ -36,68 +36,64 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Input something at below input field:</h3>
-          <SearchBar
-            { ...props.searchProps }
-            className="custome-search-field"
-            style={ { color: 'white' } }
-            delay={ 1000 }
-            placeholder="Search Something!!!"
-          />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar
+          { ...props.searchProps }
+          className="custome-search-field"
+          style={ { color: 'white' } }
+          delay={ 1000 }
+          placeholder="Search Something!!!"
+        />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Input something at below input field:</h3>
-              <SearchBar
-                { ...props.searchProps }
-                className="custome-search-field"
-                style={ { color: 'white' } }
-                delay={ 1000 }
-                placeholder="Search Something!!!"
-              />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar
+              { ...props.searchProps }
+              className="custome-search-field"
+              style={ { color: 'white' } }
+              delay={ 1000 }
+              placeholder="Search Something!!!"
+            />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );
diff --git a/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js b/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
index 9b5149a..98720d6 100644
--- a/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
+++ b/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
@@ -3,7 +3,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,7 +23,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { searchFactory } = Search;
 const columns = [{
@@ -55,28 +55,26 @@ const MySearch = (props) => {
   );
 };
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-          <MySearch { ...props.searchProps } />
-          <br />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+        <MySearch { ...props.searchProps } />
+        <br />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 const MySearch = (props) => {
@@ -99,28 +97,26 @@ const MySearch = (props) => {
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-              <MySearch { ...props.searchProps } />
-              <br />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+            <MySearch { ...props.searchProps } />
+            <br />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );
diff --git a/packages/react-bootstrap-table2-example/examples/search/index.js b/packages/react-bootstrap-table2-example/examples/search/index.js
index 7435905..252cc68 100644
--- a/packages/react-bootstrap-table2-example/examples/search/index.js
+++ b/packages/react-bootstrap-table2-example/examples/search/index.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -22,7 +22,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const columns = [{
@@ -36,56 +36,52 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Input something at below input field:</h3>
-          <SearchBar { ...props.searchProps } />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Input something at below input field:</h3>
-              <SearchBar { ...props.searchProps } />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );
diff --git a/packages/react-bootstrap-table2-example/examples/search/search-formatted.js b/packages/react-bootstrap-table2-example/examples/search/search-formatted.js
index c08f379..b6fd736 100644
--- a/packages/react-bootstrap-table2-example/examples/search/search-formatted.js
+++ b/packages/react-bootstrap-table2-example/examples/search/search-formatted.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,7 +23,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const columns = [{
@@ -38,58 +38,54 @@ const columns = [{
   formatter: cell => \`USD \${cell}\`  // we will search the data after formatted
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Try to Search USD at below input field:</h3>
-          <SearchBar { ...props.searchProps } />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps,
-              searchFormatted: true
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Try to Search USD at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps,
+            searchFormatted: true
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Try to Search USD at below input field:</h3>
-              <SearchBar { ...props.searchProps } />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps,
-                  searchFormatted: true
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Try to Search USD at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps,
+                searchFormatted: true
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index f7dc601..538bc4a 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -19,13 +19,12 @@ $ npm install react-bootstrap-table2-toolkit --save
 ## Table Search
 
 ```js
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 //...
 
-<ToolkitContext.Provider>
-  <ToolkitContext.Consumer>
+  <ToolkitProvider>
     {
       props => (
         <div>
@@ -43,13 +42,12 @@ const { SearchBar, searchFactory } = Search;
         </div>
       )
     }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  </ToolkitProvider>
 ```
 
-1. You need to enable the search functionality via `search` prop on `BootstrapTable` and pass the result of calling `searchFactory` with custom option and default `searchProps` provided by `ToolkitContext.Provider`
+1. You need to enable the search functionality via `search` prop on `BootstrapTable` and pass the result of calling `searchFactory` with custom option and default `searchProps` provided by `ToolkitProvider`
 
-2. `ToolkitContext` is a react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitContext.Consumer`
+2. `ToolkitProvider` is a wrapper of react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitProvider`
 
 3. You should render `SearchBar` with `searchProps` as well.
 
diff --git a/packages/react-bootstrap-table2-toolkit/index.js b/packages/react-bootstrap-table2-toolkit/index.js
index 03b2521..836f07d 100644
--- a/packages/react-bootstrap-table2-toolkit/index.js
+++ b/packages/react-bootstrap-table2-toolkit/index.js
@@ -1,4 +1,6 @@
-import ToolkitContext from './context';
+import Context from './context';
+import ToolkitProvider from './provider';
 
-export default ToolkitContext;
+export default ToolkitProvider;
+export const ToolkitContext = Context;
 export { default as Search } from './src/search';
diff --git a/packages/react-bootstrap-table2-toolkit/provider.js b/packages/react-bootstrap-table2-toolkit/provider.js
new file mode 100644
index 0000000..ff8a323
--- /dev/null
+++ b/packages/react-bootstrap-table2-toolkit/provider.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ToolkitContext from './context';
+
+const Toolkitprovider = props => (
+  <ToolkitContext.Provider { ...props }>
+    <ToolkitContext.Consumer>
+      {
+        tookKitProps => props.children(tookKitProps)
+      }
+    </ToolkitContext.Consumer>
+  </ToolkitContext.Provider>
+);
+
+Toolkitprovider.propTypes = {
+  children: PropTypes.func.isRequired
+};
+
+export default Toolkitprovider;