How to use the useState function from react
Find comprehensive JavaScript react.useState code examples handpicked from public code repositorys.
GitHub: szhsin/react-accordion
178 179 180 181 182 183 184 185 186 187 188
}); Accordion.displayName = 'Accordion'; let current = 0; const useIdShim = () => { const [id, setId] = react.useState(); react.useEffect(() => setId(++current), []); return id && `${ACCORDION_PREFIX}-${id}`; }; const _useId = react.useId || useIdShim;
4
84
0
1289 1290 1291 1292 1293 1294 1295 1296 1297 1298
callbackSuccess = _ref22.callbackSuccess, refreshKey = _ref22.refreshKey; if (name) checkKey(name, 'reducer name', 'string', 'valid string'); // const store = useStore(); var _useState = React.useState({}), _useState2 = _slicedToArray(_useState, 1), _key = _useState2[0]; React.useEffect(function () {
6
9
3
+ 15 other calls in file
GitHub: bulbaME/space-time
6 7 8 9 10 11 12 13 14 15
function SideBar (props) { const data = props.data.get; if (!data.user) return <></>; const [sidebar, setSidebar] = React.useState({ type: 'contacts', id: ''}); const [searchInput, setSearchInput] = React.useState(''); const [searchTimeout, setSearchTimeout] = React.useState(0); const [callTimeInt, setCallTimeInt] = React.useState(0); const callTimeRef = React.useRef(); const searchRef = React.useRef();
0
3
1
+ 7 other calls in file
11 12 13 14 15 16 17 18 19 20
height: mainElement.offsetHeight } } function useComponentSize(ref) { let [ComponentSize, setComponentSize] = useState(getSize(ref.current)) let mainElement = useRef() let asideElement = useRef() const handleResize = () => { if (ref && ref.current) {
263
0
1
GitHub: nklhtv/stremio-web
32 33 34 35 36 37 38 39 40 41
const toast = useToast(); const [, , , toggleFullscreen] = useFullscreen(); const [casting, setCasting] = React.useState(() => { return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED; }); const [immersed, setImmersed] = React.useState(true); const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []); const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false); const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false); const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
129
1
0
+ 5 other calls in file
GitHub: jlvcm/stremio-web
23 24 25 26 27 28 29 30 31 32
const discover = useDiscover(urlParams, queryParams); const [selectInputs, paginationInput] = useSelectableInputs(discover); const profile = useProfile(); const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false); const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false); const [selectedMetaItem, setSelectedMetaItem] = React.useState(() => { return getMetaItemAtIndex(discover.catalog_resource, 0); }); const metaItemsOnFocusCapture = React.useCallback((event) => { const metaItem = getMetaItemAtIndex(discover.catalog_resource, event.target.dataset.index);
129
0
1
GitHub: ppalves/stremio-web
31 32 33 34 35 36 37 38 39 40
}); const [immersed, setImmersed] = React.useState(true); const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []); const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false); const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false); const [error, setError] = React.useState(null); const [videoState, setVideoState] = React.useReducer( (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }), { paused: null,
129
0
0
+ 5 other calls in file
61 62 63 64 65 66 67 68 69
}; } function usePosition(ref) { let { top, left } = getPosition(ref.current); let [ElementPosition, setElementPosition ] = useState({ top: top, left: left, });
5
23
0
903 904 905 906 907 908 909 910 911 912
var StyledImage = styled__default['default'].img(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n"]))); var Placeholder = styled__default['default'].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"]))); var Image = function (_a) { var src = _a.src, alt = _a.alt, otherProps = __rest(_a, ["src", "alt"]); var imgRef = React.useRef(null); var _b = React.useState(false), isLoaded = _b[0], setIsLoaded = _b[1]; React.useEffect(function () { var img = imgRef.current; var observer = new IntersectionObserver(function (entries) { entries.forEach(function (entry) {
1
1
0
+ 17 other calls in file
GitHub: tahl04/bonescatch
4 5 6 7 8 9 10 11 12 13 14 15
const { createContext, useState, useEffect } = require("react"); export const DataContext = createContext(null); const MyContext = ({ children }) => { const [pageChange, setClose] = useState(false); const [data, setData] = useState(); const [who, setWho] = useState(); const { data: session } = useSession();
0
1
1
+ 8 other calls in file
8 9 10 11 12 13 14 15 16 17
const styles = require('./styles'); const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => { const disabled = volume === null || isNaN(volume); const routeFocused = useRouteFocused(); const [slidingVolume, setSlidingVolume] = React.useState(null); const resetVolumeDebounced = React.useCallback(debounce(() => { setSlidingVolume(null); }, 100), []); const onSlide = React.useCallback((volume) => {
129
0
1
GitHub: szhsin/react-menu
327 328 329 330 331 332 333 334 335 336 337
WithHovering.displayName = "WithHovering(" + name + ")"; return WithHovering; }; var useItems = function useItems(menuRef, focusRef) { var _useState = react.useState(), hoverItem = _useState[0], setHoverItem = _useState[1]; var stateRef = react.useRef({ items: [],
48
881
6
+ 9 other calls in file
1227 1228 1229 1230 1231 1232 1233 1234 1235 1236
id, spawn, roundToSeconds }) => { const isMounted = useIsMounted(); const [value, _setValue] = React.useState(void 0); const identity = { id, spawn };
1
54
1
+ 3 other calls in file
979 980 981 982 983 984 985 986 987 988
const modelFn = typeof model === "function" ? model : () => model; const memo2 = modelFn(); subscribe(memo2); return memo2; }; const [memo, setMemo] = React.useState(defer ? { ...model, isDeferred: true } : createMemo); React.useEffect(() => { if (!isInitedRef.current) { return; }
1
54
1
+ 11 other calls in file
101 102 103 104 105 106 107 108 109
onSelect = _ref.onSelect, options = _ref.options, placeholder = _ref.placeholder, style = _ref.style; var _useState = React.useState(options), _useState2 = _slicedToArray(_useState, 2), inputItems = _useState2[0], setInputItems = _useState2[1];
5
16
12
GitHub: tonioloewald/xinjs
468 469 470 471 472 473 474 475 476 477 478
const xin = new Proxy(registry, regHandler()); // TODO declare type the way it's declated for useState so that TypeScript // passes through type of initialValue to the right thing const useXin = (path, initialValue = '') => { const [value, update] = react.useState(xin[path] !== undefined ? xin[path] : initialValue); react.useEffect(() => { const observer = () => { update(xin[path]); };
0
3
2
+ 7 other calls in file
2 3 4 5 6 7 8 9 10 11 12
import { auth, db } from "../firebase-app/firebase-config"; const { createContext, useContext, useState, useEffect } = require("react"); const AuthContext = createContext(); function AuthProvider(props) { const [userInfo, setUserInfo] = useState({}); const value = { userInfo, setUserInfo }; useEffect(() => { onAuthStateChanged(auth, (user) => { if (user) {
0
0
1
17 18 19 20 21 22 23 24 25 26
var throttle_debounce_1 = require("throttle-debounce"); var useCurrencyList_1 = require("../hooks/useCurrencyList"); function SwapTokenListDialog(props) { var open = props.open, onClose = props.onClose, activeAddress = props.activeAddress, onSelect = props.onSelect, disabledAddresses = props.disabledAddresses; var tokens = useCurrencyList_1["default"](); var _a = react_2.useState(""), searchQuery = _a[0], setSearchQuery = _a[1]; // eslint-disable-next-line react-hooks/exhaustive-deps var handleSearch = react_2.useCallback(throttle_debounce_1.debounce(200, false, function (e) { var query = e.target.value; setSearchQuery(query);
0
0
1
+ 2 other calls in file
12 13 14 15 16 17 18 19 20 21 22
let localTheme; const useTheme = () => { if (typeof window !== "undefined") { localTheme = localStorage.getItem("theme"); } const [theme, setTheme] = useState(localTheme || "default"); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("theme", theme);
0
0
1
GitHub: elzp/patientMedicalApp
41 42 43 44 45 46 47 48 49 50
var srcfunctions_1 = require("./srcfunctions"); require("./../App.css"); var axios_1 = require("axios"); var usersdata_json_1 = require("../usersdata.json"); function SignIn(props) { var _a = react_1.useState(""), login2 = _a[0], setlogin = _a[1]; var _b = react_1.useState(false), isLoginUnique = _b[0], setisLoginUnique = _b[1]; var _c = react_1.useState(""), password = _c[0], setpass = _c[1]; var _d = react_1.useState(false), isPasswordOk = _d[0], setisPasswordOk = _d[1]; var _e = react_1.useState(false), showAccountPage = _e[0], setshowAccountPage = _e[1];
0
0
1
+ 5 other calls in file
react.default is the most popular function in react (505 examples)