React - amark/gun GitHub Wiki
Build a React chat app in a few minutes with O'Reilly author & AWS developer advocate @dabit3!
<iframe src="https://www.youtube.com/embed/Rc2sIPDrX_k" frameborder="0" allowfullscreen style="border: 0px; position: absolute; width: 100%; height: 100%;"></iframe>
This React library exposes all the Gun functionalities.
Check out the Sample React App that shows how you can set up a very basic Gun & React project.
Old gun-react example
npm install --save gun-react
Sample Usage:
import React, { useState } from "react";
import { useGun} from 'gun-react'
let config = {
s3: {
key: '',
secret: '',
bucket: ''
},
// simple JSON persistence (bundled)
// meant for ease of getting started
// NOT meant for production
file: 'file/path.json',
// set your own UUID function
uuid: () => { }
}
const App = (props) => {
const[firstName, setFirstName] = useState('');
const[lastName, setLastName] = useState('');
const[age, setAge] = useState('');
React.useEffect(()=>{
let { gunService } = props;
if(gunService){
gunService.get('user').on((data, key) => {
console.log("previously saved data", data)
});
}
})
const submitValue = (e) => {
e.preventDefault();
const formDetails = {
'FirstName': firstName,
'LastName': lastName,
'Age': age,
}
let { gunService } = props;
gunService.get('user').put({
...formDetails
});
gunService.get('user').on((data, key) => {
console.log("saved data", data)
let result = data; // you can now get the saved data right here
});
}
return (
<div>
<label>Firstname</label>
<input id="textinput" name="firstname" onChange={e => setFirstName(e.target.value)}
type="text"></input><br/>
<label>Lastname</label>
<input id="textinput" name="lastname" type="text" onChange={e => setLastName(e.target.value)}
></input><br/>
<label >Age</label>
<input id="textinput" name="age" type="number" placeholder="Age" onChange={e => setAge(e.target.value)}
></input><br/>
<button onClick={submitValue} class="btn btn-success">Ok</button>
</div>
);
}
// just bind useGun();
//useGun accepts the normal Gun Configuration and a Component to Render and then returns gunService as a Property
export default useGun(App, config);