marshallmurphy

//...

return (
  <div className="App"> // keep this div for styling later
    <div onClick={() => animate()}> // here
      <Lottie 
        options={options}
        height={400}
        width={400}
        isClickToPauseDisabled={true}

marshallmurphy

import React, { useState } from 'react';
import Lottie from 'react-lottie-segments';
import animationData from './lotties/toggle.json';
import styles from './App.module.css';

function App() {
  const [sequence, setSequence] = useState({ // here
    segments: [0, 1],
    forceFlag: true
  })

marshallmurphy

//...
return (
    <div className="App">
      <Lottie 
        options={options}
        height={400}
        width={400}
        isClickToPauseDisabled={true} // here
        playSegments={sequence} // & here
      />

marshallmurphy

//...
return (
    <div className="App">
      <Lottie 
        options={options}
        height={400}
        width={400}
        isClickToPauseDisabled={true} // here
        playSegments={sequence} // & here
      />

marshallmurphy

function App() {
  const options = {
    loop: false, // here
    autoplay: false, // & here
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"  
    }
  }
  

marshallmurphy

import Lottie from 'react-lottie-segments';
import animationData from './lotties/toggle.json';
import './App.css';

function App() {
  const options = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {

marshallmurphy

import Lottie from 'react-lottie-segments';
import animationData from './lotties/toggle.json';
import './App.css';

function App() {
  const options = {
   
  };
  
  return (

marshallmurphy

import Lottie from 'react-lottie-segments'; // here
import animationData from './lotties/toggle.json'; // here
import './App.css';

function App() {
  return (
    <div className="App">
    
    </div>
  );

marshallmurphy

import './App.css';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

marshallmurphy

const removeTodo = (i, checked) => {
  if (checked) {
    const newCompletedTodos = [...completedTodos];
    newCompletedTodos.splice(i, 1);
    setCompletedTodos(newCompletedTodos); 
  } else {
    const newTodos = [...todos];
    newTodos.splice(i, 1);
    setTodos(newTodos);
  }