gregberge

import { useEffect, useMemo, useRef, useState } from "react";

import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
import { usePrevious } from "./usePrevious";
import { useResizeObserver } from "./useResizeObserver";

export type UseElementOverflowProps<T> = {
  /** The array of elements to render */
  items: Array<T>;
};

gregberge

const program = require("commander");
const { withSpinner } = require("./util");

const newsIndexer = require("../server/services/news/indexer");
const imagesIndexer = require("../server/services/images/indexer");
const articlesIndexer = require("../server/services/articles/indexer");
const liveInputsIndexer = require("../server/services/live-inputs/indexer");
const snippetsIndexer = require("../server/services/snippets/indexer");
const postsIndexer = require("../server/services/posts/indexer");

gregberge

// Specification of the List component

// This complete example describe the API of the component
// It has to be implemented to work with this API

function ListExample() {
  const list = useListState({
    columns: {
      name: {
        props: {

gregberge

// App.js
import React, { useState, useEffect, useRef } from 'react'
import {
  Normalize,
  Grid,
  Typography,
  Row,
  Col,
  Button,
} from '@smooth-ui/core-sc'

gregberge

import React from 'react'
import styled, { Box, css, variant } from '@xstyled/styled-components'

const variants = variant({
  variants: {
    gold: css`
      background-color: gold;
      color: white;
      border-color: gold;
    `,

gregberge

import React, { useContext } from 'react'
import ReactDOM from 'react-dom/server'
import ssrPrepass from 'react-ssr-prepass'

const Context = React.createContext()

const asyncFoo = async () => 'foo'

function MyComponent() {
  const tracker = useContext(Context)

gregberge

import React, { useState, useEffect } from 'react'
import { createPortal } from 'react-dom'
import styled from 'styled-components'

const Backdrop = styled.div`
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;

gregberge

import { Box } from "@smooth-ui/core-sc";

<Box
  backgroundColor="primary"
  width={{ sm: 1, md: 0.5 }}
  height={100}
  mx="auto"
  p={2}
/>

gregberge

import styled from "styled-components";
import system from "@smooth-ui/system";

const MyBox = styled.div(
  system({
    backgroundColor: 'primary',
    width: { sm: 1, md: 0.5 },
    height: 100,
    mx: 'auto',
    p: 2,

gregberge

import { useState, useEffect } from 'react'

export const useCountdown = ({ initialValue, delay }) => {
  const [value, setValue] = useState(initialValue)
  useEffect(() => {
    if (value > 0) setTimeout(() => setValue(value - 1), delay)
  })
  return value
}