WebAPI IndexedDB + react with hooks = 💖
npm install react-indexed-db-hooks##
Several quick start options are available:
- Install with npm: npm install react-indexed-db-hooks
- Install with yarn: yarn add react-indexed-db-hooks
``
import {IndexedDBProvider, IndexedDBReducer} from './indexedDBProvider';
{
schema: 'info',
autoIncrement: {keyPath: 'id', autoIncrement: true},
indexes: [
{name: 'name', keypath: 'name', options: {unique: false}},
{name: 'phone', keypath: 'phone', options: {unique: true}},
{name: 'gender', keypath: 'gender', options: {unique: false}}
],
},
{
schema: 'auth',
autoIncrement: {keyPath: 'id', autoIncrement: true},
indexes: [
{name: 'userId', keypath: 'userId', options: {unique: true}},
{name: 'password', keypath: 'password', options: {unique: false}},
],
},
]}}
reducer={IndexedDBReducer}
>
// child component
`
- Use ObserveTransaction component (only insert, delete, clear observation)
`
import { ObserveTransaction } from 'react-indexed-db-hooks';
/*
scheme : require (string)
index : require (string)
value : default null (string | number)
loading : deafault false (boolean)
loadingComponent default null (Component)
*/
index="gender"
value="male">
{({ result }) => {
if (!!result) {
return result.map((item, idx) =>
name: {item.name}
phone: {item.phone}
- import useIndexedDB in your project.
import { useIndexedDB } from 'react-indexed-db-hooks';const {
insert,
findById,
findByKey,
findByValue,
findAll,
findAllKeys,
count,
update,
deleteByKey,
claer
} = useIndexedDB();
insert :
insert('info', {name: 'Hudson', phone: '010-1111-1111', gender: 'male' })
.then(success => {
consolel.log('success = ', success)
})
.catch(error => alert(error));
findById :
findById('info', 1)
.then(success => console.log('success = ', success))
.catch(error => alert(error));
findByKey :
findByKey('info', 'phone', '010-0000-0000')
.then(success => console.log('success = ', success))
.catch(error => alert(error));
findByValue :
findByValue('info', 'phone', '010-0000-0000')
.then(success => console.log('success = ', success))
.catch(error => alert(error));
findAll :
findAll('info')
.then(success => console.log('success = ', success))
.catch(error => alert(error));
findAllKeys :
findAllKeys('info')
.then(success => console.log('success = ', success))
.catch(error => alert(error));
count :
count('info')
.then(success => console.log('success = ', success))
.catch(error => alert(error));
update :
update('info', {
name: 'kims-acount',
phone: '010-0000-0000',
gender: 'female',
id: 3,
})
.then(success => console.log('update kims-acount success!! = ', success))
.catch(error => alert(error));
deleteByKey :
deleteByKey('info', 1)
.then(success => console.log('key 1 is delete = ', success))
.catch(error => alert(error));
deleteByValue :
deleteByKey('info', 'phone', '010-0000-0000')
.then(success => console.log('kims-acount delete success!! = ', success))
.catch(error => alert(error));
deleteAllIndexMatchValue:
deleteAllIndexMatchValue('info', 'gender', 'male')
.then(success => console.log('male data all delete = ', success))
.catch(error => alert(error));
clear :
clear('info')
.then(success => console.log('info clear success!! = ', success))
.catch(error => alert(error));