This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect, useRef } from 'react'; | |
// Usage | |
function App() { | |
// Create a ref that we add to the element for which we want to detect outside clicks | |
const ref = useRef(); | |
// State for our modal | |
const [isModalOpen, setModalOpen] = useState(false); | |
const openModal = useCallback(() => setModalOpen(true), []); | |
const closeModal = useCallback(() => setModalOpen(false), []); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect, useRef } from 'react'; | |
// Usage | |
function App() { | |
// Ref for the element that we want to detect whether on screen | |
const ref = useRef(); | |
// Call the hook passing in ref and root margin | |
// In this case it would only be considered onScreen if more ... | |
// ... than 300px of element is visible. | |
const onScreen = useOnScreen(ref, '-300px'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Radium from 'radium'; | |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
// import Radium, { Style } from 'radium'; | |
var FakeUser = React.createClass({ | |
getInitialState: function() { | |
return {firstname: '', lastName: '', gender: '', location: '', email: '', username: '', password: '', picture: ''}; |