How to use react-stay-scrolled - 6 common examples

To help you get started, we’ve selected a few react-stay-scrolled examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github perrin4869 / react-stay-scrolled / examples / src / main.jsx View on Github external
const App = () => {
  const divRef = useRef(null);
  const { stayScrolled } = useStayScrolled(divRef);
  const [messages, setMessages] = useState(initialMessages);

  useInterval(() => {
    setMessages((prevMessages) => prevMessages.concat([message]));
  }, 500);

  useLayoutEffect(() => {
    stayScrolled();
  }, [messages]);

  return (
    <div style="{style}">
      {/* eslint-disable-next-line react/no-array-index-key */}
      {messages.map(({ text }, i) =&gt; <div>{`${text} ${i}`}</div>)}
    </div>
  );
github perrin4869 / react-stay-scrolled / examples / src / messages.jsx View on Github external
export default (props) =&gt; {
  const divRef = useRef(null);
  const intervalRef = useRef(null);
  const { stayScrolled } = useStayScrolled(divRef);
  const [messages, setMessages] = useState(initialMessages);

  useEffect(() =&gt; {
    intervalRef.current = setInterval(() =&gt; {
      setMessages(prevMessages =&gt; prevMessages.concat([message]));
    }, 500);
  }, []);

  useLayoutEffect(() =&gt; {
    stayScrolled();
  }, [messages]);

  return (
    <div>
      {/* eslint-disable-next-line react/no-array-index-key */}
      {messages.map(({ text }, i) =&gt; <div>{`${text} ${i}`}</div>)}</div>
github perrin4869 / react-stay-scrolled / examples / src / message.jsx View on Github external
stayScrolled: PropTypes.func.isRequired,
  }

  componentDidMount() {
    const { stayScrolled } = this.props;
    stayScrolled();
  }

  render() {
    const { text } = this.props;

    return <div>{text}</div>;
  }
}

export default scrolled(Message);
github AJInteractive / InterviewJS / packages / composer / src / partials / misc / Storyline.js View on Github external
))}
      
    );
  }
}

Storyline.propTypes = {
  storyline: arrayOf(object)
};

Storyline.defaultProps = {
  storyline: []
};

export default scrolled(Storyline);
github generative-music / generative.fm / src / components / player / log.jsx View on Github external
import React, { Component } from 'react';
import { scrolled } from 'react-stay-scrolled';
import PropTypes from 'prop-types';

class Log extends Component {
  render() {
    return <div>{this.props.message.toLowerCase()}</div>;
  }
}

Log.propTypes = {
  scrollBottom: PropTypes.func,
  message: PropTypes.string,
};

export default scrolled(Log);
github singer-io / knots / app / components / Log / index.js View on Github external
};

class Log extends Component {
  componentDidMount() {
    const { stayScrolled } = this.props;
    stayScrolled();
  }

  render() {
    const { log } = this.props;

    return <pre>{log}</pre>;
  }
}

export default scrolled(Log);

react-stay-scrolled

React component to keep content always scrolled down

MIT
Latest version published 1 year ago

Package Health Score

62 / 100
Full package analysis

Popular react-stay-scrolled functions