React-spring transition throws 126:20-30 'react-spring' does not contain an export named 'Transition'

Question

Following a tutorial and code looks identical but still getting err: "126:20-30 'react-spring' does not contain an export named 'Transition'."... ive read the docs for react spring to get the transition effect and have changed the import tried to redefine my code to what docs said but still nothing.

import React, { Component, Fragment, createContext } from 'react';
import { Transition } from 'react-spring';

import logo from './logo.svg';
import './App.css';
import { Toggle } from 'Utilities';
import { Modal } from 'Elements';
import User from './User';
import UserProvider from './UserProvider';




class App extends Component {
  render() {
    return (
      <UserProvider>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <User />
          <section>
          <Toggle>
            {({ on, toggle }) => (
              <Fragment>
                <button onClick={toggle}>Show / Hide</button>
                <Transition
                  from={{ opacity: 0 }}
                  enter={{ opacity: 1 }}
                >
                    {on && <Header />}
                </Transition>
              </Fragment>
            )}
          </Toggle>
          </section>
          <Toggle>
            {({ on, toggle }) => (
              <Fragment>
                <button onClick={toggle}>Login</button>
                <Modal on={on} toggle={toggle}>
                  <h1>Still what's up this is Gabriel</h1>
                </Modal>
              </Fragment>
            )}
          </Toggle>

score 0 · Answer 1 · answered May 08 '19 at 02:05

0

i have solved by being more detailed in my research.

import { Transition } from 'react-spring/renderprops'

<Transition items={on} from={{ opacity: 0 }} enter={{ opacity: 1 }}>
      {on => on && Header}
</Transition>

answered May 08 '19 at 02:05

Gabe Corona

5
2

score 0 · Answer 2 · answered Nov 28 '19 at 17:13

0

Anything that has to do with react-spring you will use 'renderprops'

E.g:

Import { Transition } from 'react-spring/renderprops'

answered Nov 28 '19 at 17:13

connelblaze

779
1
10
19

React-spring transition throws 126:20-30 'react-spring' does not contain an export named 'Transition'

2 Answers2