How to use pullstate - 10 common examples

export default props => {
  const isDarkMode = useStoreState(GlobalStore, s => s.isDarkMode);

  return (
    <div>
      
        
          
        
      
    </div>
  )
}

export default () => {
  const isLoading = useStoreState(GlobalStore, s => s.isLoading);

  return (
    <header>
      <div>
        
          
        
        
          <h1>Flipnote Player</h1>
          <h2>Version { process.env.__VERSION__ }</h2>
        
        </div></header>

export default function ErrorModal() {
  const hasError = useStoreState(GlobalStore, s => s.hasError);
  const errorType = useStoreState(GlobalStore, s => s.errorType);
  const errorData = useStoreState(GlobalStore, s => s.errorData);
  const closeModal = () => {GlobalStore.update((store) => {
    store.hasError = false;
  })}

  if (errorType === 'FLIPNOTE_COULD_NOT_BE_LOADED') {
    var content = (
      <div>
        <p>
          This Flipnote could not be loaded.
        </p>
        <p>
          If this seems to be a bug, please open an issue thread on this <a href="https://github.com/jaames/flipnote-player/issues">project's GitHub page</a>, or contact me on <a href="https://twitter.com/rakujira">Twitter</a>.
        </p>
      </div>
    );
  } else {

export default function FlipnotePlayer(props) {

  const playerNote = useStoreState(PlayerStore, store => store.note);
  const playerForcePause = useStoreState(PlayerStore, store => store.forcePause);

  const canvasWrapper = useRef(null);
  const mainElement = useRef(null);

  window.mainElement = mainElement;

  const [type, setType] = useState('PPM');
  const [paused, setPaused] = useState(true);
  const [loop, setLoop] = useState(false);
  const [currentFrame, setCurrentFrame] = useState(0);
  const [currentProgress, setCurrentProgress] = useState(0);
  const [frameCount, setFrameCount] = useState(1);
  const [showFrameCounter, setShowFrameCounter] = useState(true);
  const [showSettingsMenu, setShowSettingsMenu] = useState(false);
  const [layerVisibility, setLayerVisibility] = useState({ 1: true, 2: true, 3: true });
  const [volume, setVolume] = useState(100);

export default function FlipnotePlayer(props) {

  const playerNote = useStoreState(PlayerStore, store => store.note);
  const playerForcePause = useStoreState(PlayerStore, store => store.forcePause);

  const canvasWrapper = useRef(null);
  const mainElement = useRef(null);

  window.mainElement = mainElement;

  const [type, setType] = useState('PPM');
  const [paused, setPaused] = useState(true);
  const [loop, setLoop] = useState(false);
  const [currentFrame, setCurrentFrame] = useState(0);
  const [currentProgress, setCurrentProgress] = useState(0);
  const [frameCount, setFrameCount] = useState(1);
  const [showFrameCounter, setShowFrameCounter] = useState(true);
  const [showSettingsMenu, setShowSettingsMenu] = useState(false);
  const [layerVisibility, setLayerVisibility] = useState({ 1: true, 2: true, 3: true });

export default function Modal({isVisible, isBackdropVisible, onHide, className, title, children}) {
  const isDarkMode = useStoreState(GlobalStore, s => s.isDarkMode);


  const body = useRef(document.body);
  const root = useRef();
  useOnClickOutside(root, (e) => {
    onHide();
  });

  useEffect(() => {
    const bodyClasses = body.current.classList;
    if (isVisible && isBackdropVisible) {
      bodyClasses.add('is-modal-open');
    } else {
      bodyClasses.remove('is-modal-open');
    }
  }, [isVisible, isBackdropVisible]);

export default (props) => {

  const gridMode = useStoreState(GridStore, store => store.mode);
  const gridItems = useStoreState(GridStore, store => store.items);
  const gridPage = useStoreState(GridStore, store => store.page);
  const startLoading = () => GlobalStore.update(store => { store.isLoading = true; });
  const stopLoading = () => GlobalStore.update(store => { store.isLoading = false; });

  const loadFlipnote = (src) => {
    startLoading();
    parseSource(src)
      .then(note => {
        PlayerStore.update(store => { store.src = src; store.note = note; });
        props.history.push('/view');
        stopLoading();
      }).catch(err => {
        stopLoading();
        GlobalStore.update(store => {
          store.hasError = true;
          store.errorType = 'FLIPNOTE_COULD_NOT_BE_LOADED',

export default function ConversionModal({ isVisible, onHide }) {

  const playerNote = useStoreState(PlayerStore, store => store.note);

  return (
    
      <div>
      <div> { convertToGif(playerNote) } }&gt;Convert GIF</div>
      <div> { convertToGifSequence(playerNote) } }&gt;Convert GIF Sequence</div>
      <div> { convertToMp4(playerNote) } }&gt;Convert MP4</div>
      </div>
    
  );

export default (props) => {

  const gridMode = useStoreState(GridStore, store => store.mode);
  const gridItems = useStoreState(GridStore, store => store.items);
  const gridPage = useStoreState(GridStore, store => store.page);
  const startLoading = () => GlobalStore.update(store => { store.isLoading = true; });
  const stopLoading = () => GlobalStore.update(store => { store.isLoading = false; });

  const loadFlipnote = (src) => {
    startLoading();
    parseSource(src)
      .then(note => {
        PlayerStore.update(store => { store.src = src; store.note = note; });
        props.history.push('/view');
        stopLoading();
      }).catch(err => {
        stopLoading();
        GlobalStore.update(store => {
          store.hasError = true;
          store.errorType = 'FLIPNOTE_COULD_NOT_BE_LOADED',
          store.errorData = {

export default function ErrorModal() {
  const hasError = useStoreState(GlobalStore, s => s.hasError);
  const errorType = useStoreState(GlobalStore, s => s.errorType);
  const errorData = useStoreState(GlobalStore, s => s.errorData);
  const closeModal = () => {GlobalStore.update((store) => {
    store.hasError = false;
  })}

  if (errorType === 'FLIPNOTE_COULD_NOT_BE_LOADED') {
    var content = (
      <div>
        <p>
          This Flipnote could not be loaded.
        </p>
        <p>
          If this seems to be a bug, please open an issue thread on this <a href="https://github.com/jaames/flipnote-player/issues">project's GitHub page</a>, or contact me on <a href="https://twitter.com/rakujira">Twitter</a>.
        </p>
      </div>
    );