How to contribute, and how to import Parallax?

[localjo]

🤓 Question

I've been looking for this answer for days in the documentation, Spectrum and Stack Overflow. Information about this project is very hard to navigate, and it seems that the project structure is undergoing significant changes at the moment, which further complicates the process. I'm asking here because I don't know where else to ask.

Ultimately, I'm opening this issue because the contributor experience for this project needs some improvement. Let me tell you the story that led me here over the past 3 days.

My Story

I'm trying to solve a problem with the Parallax code. I think I have a solution, but I am struggling to find the documentation for the Parallax functionality and the overall project structure/usage. I would like to install my fix locally, and open a PR once I've fully tested the fix, but I can't find documentation for these processes.

Here's what I've tried:

I built my local fork with yarn build, then, in my project, I installed my local fork:

yarn add file:/path/to/my/fork/react-spring

Then tried to use it as suggested in the documentation:

import {Parallax, ParallaxLayer} from 'react-spring/renderprops-addons';

But react-spring/renderprops-addons can't be resolved. So I tried to be more specific:

import { Parallax, ParallaxLayer } from 'react-spring/dist/renderprops-addons.cjs.js';

This file is found, but it still doesn't work because dist/renderprops-addons.cjs.js requires react-spring/renderprops which can't be resolved.

I don't have a clue what renderprops are in the context of this project, so I tried to find the documentation for that, and I found this link in the sidebar on the documentation website, but expanding it does nothing (I checked, I don't have any script blockers running):

I did find via Stack Overflow (it's not mentioned in the documentation) that there is a @react-spring/parallax package on npm, which "works" if I just want to import and use Parallax. But it's labeled "canary", so I don't think it's intended to use in production. And, since the "repo" link on that npm package links to a 404 page, it's not clear how I can package and import my fork of it locally for testing.

I could just skip all of the local testing, and open a PR with my changes, but I also couldn't find any contribution guidelines, so I don't know if there are any tests or other checks that need to be considered when opening a PR, but I did notice that when I build the project locally there is a .size-snapshot.json that is generated, and I don't know if that should be included in the PR or not.

My Questions

In summary, these are my questions:

1) Where is the accurate documentation for importing and using Parallax? 2) Where is the documentation for the renderprops API? 3) Where are the guidelines for contributing to this project?

[aleclarson]

1. Where is the accurate documentation for importing and using Parallax?

To import:

import { Parallax, ParallaxLayer } from '@react-spring/parallax'

Usage is explained in the v8 docs. See below.

2. Where is the documentation for the renderprops API?

Currently, the v9 docs only focus on additions and breaking changes. But you can find the v8 docs for the "render props API" using these links:

• Spring
• Trail
• Transition
• Keyframes
• Parallax
• Performance
• Gotchas

FWIW, the menu on react-spring.io works correctly in the latest Brave and Chrome. I don't plan on fixing that issue, since I'm rewriting the website for v9.

3. Where are the guidelines for contributing to this project?

I recommend cloning the v9 branch. More info: https://github.com/react-spring/react-spring/blob/v9/CONTRIBUTING.md

Also, I updated the latest tag of every @react-spring/* package to be 9.0.0-rc.3.

[localjo]

@aleclarson Thank you for the response. I've created a new PR based off of the guidelines you linked.

I realize that this project is probably in flux right now due to the restructuring for version 9, so thank you for helping me navigate the confusion.

One thing the CONTRIBUTING.md didn't mention is that you have to have @babel/core and @babel/cli installed globally before running yarn.

For the duplicate React errors, I'm using Gatsby, so I had to use gatsby-plugin-alias-imports to modify my webpack config. Just in case anyone else needs to know how to do that, I did it by adding this to gatsby-config.js:

{
  resolve: `gatsby-plugin-alias-imports`,
  options: {
    alias: {
      react: path.resolve('node_modules/react'),
    },
  },
},

[aleclarson]

One thing the CONTRIBUTING.md didn't mention is that you have to have @babel/core and @babel/cli installed globally before running yarn.

That's a mistake. Should be fixed now, thanks!

Also, I added your Gatsby workaround to CONTRIBUTING.md 👍