solidjs-community / solid-spring Goto Github PK

View Code? Open in Web Editor NEW

83.0 6.0 3.0 248 KB

Like react-spring, but for SolidJS.

License: MIT License

JavaScript 0.63% TypeScript 99.37%

solidjs animation spring react-spring

solid-spring's People

Contributors

Stargazers

Watchers

Forkers

vanillacode314 garth dakotys

solid-spring's Issues

SSR - animated `Unrecoverable Hydration Mismatch` error

Hi!
Thank you for creating this lib!
I use this library with solid-start.
I created a page in the routes folder with

export default function Page() {
    return  <animated.div>
        test
    </animated.div>
}

But if I render it in SSR - I get warnings:

Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-0-0-0
Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-0-1
Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-1-0-0

And then the error

ErrorBoundary.tsx:27 Error: Unrecoverable Hydration Mismatch. No template for key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-0-1
    at getNextElement (dev.js:250:26)
    at Object.fn (dev.js:590:43)
    at runComputation (dev.js:705:22)
    at updateComputation (dev.js:688:3)
    at Object.readSignal (dev.js:621:99)
    at resolveChildren (dev.js:972:82)
    at createMemo.name [as fn] (dev.js:587:33)
    at runComputation (dev.js:705:22)
    at updateComputation (dev.js:688:3)
    at createMemo (dev.js:244:10)

so I could not use it in SSR

You can reproduce it in any solid-start example with this page content.
For example:
https://github.com/solidjs/solid-start/tree/main/examples/bare
And replace https://github.com/solidjs/solid-start/blob/main/examples/bare/src/routes/index.tsx content with

export default function Page() {
    return  <animated.div>
        test
    </animated.div>
}

"Unrecognized value. Skipped inserting"

Hi Thanks for the lib :)

I want to use the numbers effect, but console logs "Unrecognized value. Skipped inserting".

https://codesandbox.io/s/numbers-kbc57h?file=/index.tsx

Any idea why this could be happening?

[Bug] Any children on an animated element gets mounted twice and the second ref is unusable

Repro

https://codesandbox.io/s/solidspringdoublemountrepro-7jqzuv?file=%2Fsrc%2Fmain.tsx

Workaround

function() {
  let myRef
  return (
    <animated.div style={{'backgroud-color':'red',...expand()}}>
      <div ref={(el)=> {
          if (myRef) return
          myRef = el
        }}
      >
        I get mounted twice and the second ref is unusable
      </div>
    </animated.div>
  )
}

How to use with props?

The examples are all using const value, I'm not sure how to use it with props value? , eg:

const springs = createSpring({
   from: { x: props.x, y: props.y}
...

But then the animted.div doesn't get react anyway, any solution for this issue?

And here is my code snippet for using spring to show an dot animation on positions (passed by props.x, props.y):

function Dot(props) {
  const [local] = splitProps(props, ["x", "y"])

  const styles = createSpring({
    from: {
      x: local.x,
      y: local.y 
    },
    to: {
      x: local.x,
      y: local.y
    }
  })


  
  return (
    <>
      <animated.div
        style={{
          width: `20px`,
          height: `20px`,
          background: '#ff6d6d',
          "border-radius": '50%',
          ...styles()
        }}
      >
        <span>RID:{Math.random()}</span>
      </animated.div> 
    
    </>
  )
}

No documentation

This Repository has no documentation and the .start() update the state and .update() does nothing

solidjs-community / solid-spring Goto Github PK

solid-spring's People

Contributors

Stargazers

Watchers

Forkers

solid-spring's Issues

SSR - animated `Unrecoverable Hydration Mismatch` error

"Unrecognized value. Skipped inserting"

[Bug] Any children on an animated element gets mounted twice and the second ref is unusable

Repro

Workaround

How to use with props?

No documentation

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs