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;
//...
-
-
- {
- props => (
-
-
Input something at below input field:
-
-
-
-
- )
- }
-
-
+
+ {
+ props => (
+
+
Input something at below input field:
+
+
+
+
+ )
+ }
+
```
### onTableChange - [Function]
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 => (
-
-
- {
- toolkitprops => [
- ,
-
- ]
- }
-
-
+ {
+ toolkitprops => [
+ ,
+
+ ]
+ }
+
);
@@ -109,27 +108,25 @@ class Container extends React.Component {
const RemoteFilter = props => (
-
-
- {
- toolkitprops => [
- ,
-
- ]
- }
-
-
+ {
+ toolkitprops => [
+ ,
+
+ ]
+ }
+
{ sourceCode }
);
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
}];
-
-
- {
- props => (
-
-
Try to Search Bob, Cat or Allen instead of 0, 1 or 2
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Try to Search Bob, Cat or Allen instead of 0, 1 or 2
+
+
+
+
+ )
+ }
+
`;
export default () => (
-
-
- {
- props => (
-
-
Try to Search Bob, Cat or Allen instead of 0, 1 or 2
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Try to Search Bob, Cat or Allen instead of 0, 1 or 2
+
+
+
+
+ )
+ }
+
{ sourceCode }
-
Input something at below input field:
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Input something at below input field:
+
+
+
+
+ )
+ }
+
`;
export default () => (
-
-
- {
- props => (
-
-
Input something at below input field:
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Input something at below input field:
+
+
+
+
+ )
+ }
+
{ sourceCode }
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
+
+
+
+ )
+ }
+
`;
const MySearch = (props) => {
@@ -99,28 +97,26 @@ const MySearch = (props) => {
export default () => (
-
-
- {
- props => (
-
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
+
+
+
+ )
+ }
+
{ sourceCode }
-
Input something at below input field:
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Input something at below input field:
+
+
+
+
+ )
+ }
+
`;
export default () => (
-
-
- {
- props => (
-
-
Input something at below input field:
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Input something at below input field:
+
+
+
+
+ )
+ }
+
{ sourceCode }
-
Try to Search USD at below input field:
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Try to Search USD at below input field:
+
+
+
+
+ )
+ }
+
`;
export default () => (
-
-
- {
- props => (
-
-
Try to Search USD at below input field:
-
-
-
-
- )
- }
-
-
+ {
+ props => (
+
+
Try to Search USD at below input field:
+
+
+
+
+ )
+ }
+
{ sourceCode }
@@ -43,13 +42,12 @@ const { SearchBar, searchFactory } = Search;
)
}
-
-
+
```
-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 => (
+
+
+ {
+ tookKitProps => props.children(tookKitProps)
+ }
+
+
+);
+
+Toolkitprovider.propTypes = {
+ children: PropTypes.func.isRequired
+};
+
+export default Toolkitprovider;