Can't change React-tilt default options doesnt work

Question

i'm designing a blog, and i want to use react-tilt for a premium and incredible experience, well, everything works, tilt works, effects works, but i want to change default options, like max tilt rotation
what i tried?
In the default doumentation says that i need to set that defaultOptions, As you can see, I put it in the code and still nothing changes, vary or change any value of the defaultOptions, and nothing
well there you have my code:

import React from 'react'
import { deleteBlogRequest } from '../../api/blosg.api'
import { useBlogs } from './BlogContext'
import { Link, useNavigate } from 'react-router-dom'
import { Tilt } from 'react-tilt'

const defaultOptions = {
    reverse:        false,  // reverse the tilt direction
    max:            1,     // max tilt rotation (degrees)
    perspective:    2000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:          1.1,    // 2 = 200%, 1.5 = 150%, etc..
    speed:          1000,   // Speed of the enter/exit transition
    transition:     false,   // Set a transition on enter/exit.
    axis:           null,   // What axis should be disabled. Can be X or Y.
    reset:          true,    // If the tilt effect has to be reset on exit.
    easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
}

function Blogcard({ e }) {

  const {handleDelete} = useBlogs()
  const colors = ["#018aff", "#ff7c01", "#01ff56"]
  var rand = colors[Math.floor(colors.length * Math.random())]

  return (
    <>
    <Tilt options={{defaultOptions}} className="blogs" 
    style={{border: `3px dashed ${rand}`, background: `${rand + "1c"}`}}>
      <div onClick={() => window.location.href = `/post/${e.id}`}>
        <img src={e.image}/>
        <h1>{e.post}</h1>
        <h2>{e.name}</h2>
        <p><small>{e.createAt}</small></p>
      </div>
        {/* <button onClick={() => handleDelete(e.id)}>eliminar</button> */}
      </Tilt>
    </>
  )
}

export default Blogcard

Thanks!!

Answer 1

You need:

<Tilt options={defaultOptions}  ...

As opposed to options={{defaultOptions}}. The double curly braces mean you are not passing the options object directly to the options prop of <Tilt>.

Instead, you are creating a new object that evaluates as { defaultOptions: defaultOptions } and passing that to the options prop — as per the shorthand notation of object properties. Since the library is internally accessing, for example, props.options.easing and not props.options.defaultOptions.easing, they aren't having an effect.

It expects the options object to be passed directly, as is.