React

Guide

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>

Community

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);