https://github.com/utkarshdubey/react-spline

A wrapper to painlessly integrate Spline projects into your React code-space. ☀
https://github.com/utkarshdubey/react-spline

animation react react-spline spline threejs

Last synced: 1 day ago
JSON representation

A wrapper to painlessly integrate Spline projects into your React code-space. ☀

• Host: GitHub
• URL: https://github.com/utkarshdubey/react-spline
• Owner: utkarshdubey
• Archived: true
• Created: 2021-01-27T12:35:41.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-26T03:55:15.000Z (over 2 years ago)
• Last Synced: 2024-09-30T06:29:45.780Z (about 2 months ago)
• Topics: animation, react, react-spline, spline, threejs
• Language: JavaScript
• Homepage: https://utkarshdubey.github.io/react-spline/
• Size: 14 MB
• Stars: 83
• Watchers: 4
• Forks: 14
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - react-spline - space. ☀ | utkarshdubey | 48 | (JavaScript)

README

        
# React Spline

[![NPM](https://img.shields.io/npm/v/react-spline.svg)](https://www.npmjs.com/package/react-spline) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Archive Notice

The repository has been archived now since Spline has released their official library [@splinetool/react-spline](https://www.npmjs.com/package/@splinetool/react-spline) for importing models. I had fun maintaining this project, if your existing workspace is using `react-spline`, the transitioning won't be hard since most of the generics are similar. Thanks for stopping by.

A painless, configurable, [spline](https://spline.design) wrapper for React to add sweet animations easily into your projects.

![Demo Gif](./demo.gif)

## Install

```bash

npm install --save react-spline

```

or

```bash

yarn add react-spline

```

## Usage

Import the `Spline` component from `react-spline` and you're set.

```tsx

import React, { Component } from 'react'

import { Spline } from 'react-spline'

import SCENE_OBJECT from './scene.json'

class Example extends Component {

  render() {

    return 

  }

}

```

## Props

| Property              | Description                                                              |

| --------------------- | ------------------------------------------------------------------------ |

| scene `object`        | Required. The scene object exported from Spline.                         |

| id `string`           | Default empty. Assignable HTMLAttribute `id` for the `` element. |

| className `string`    | Default empty. Assignable HTMLAttribute `class` for the `
` wrapper. |

| style `JSX CSS`       | Default empty. Custom styling for the `
` wrapper.                   |

| canvasStyle `JSX CSS` | Default empty. Custom styling for the `` element.                |


## Loading the Spline model

To download Spline models from the link that gets generated in Spline, it's accessible at ``https://my.spline.design/example-8b43571.../scene.json`` (**Note**: Here *example-8b43571* in the link is a placeholder for a Spline generated link). You can then import the object and use it like shown above.

## Multiple THREE.js Warning Issue

The older versions of this library experience a ~~bug~~ problem, where outdated usage of functions in the Spline runtime cause multiple duplicate warnings to clutter the console. For now, it has been disabled by a workaround script that removes duplicate warnings from the console until we have a proper solution.

## License

MIT © [utkarshdubey](https://github.com/utkarshdubey)