Function components cannot be given refs.

Hello! I’d like to move from styled-components to goober, but can’t fix one issue:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Here is example: https://codesandbox.io/s/react-goober-forked-w3dh2?file=/src/index.js

i’ve tried many things, but console.log(ref) is always undefined, instead of el What i’m doing wrong?

[cristianbote]

Hi @Crisis2010, thanks for opening this issue.

Since goober is agnostic of your virtual dom, jsx, library of choice,styled supports a second argument that is the reference for your library forwardRef API. In your case you need to pass React.forwardRef as the second argument to the components that you need your ref to:

const Title = styled("h1", React.forwardRef)`
  font-weight: bold;
  color: dodgerblue;
`;

Let me know if this helps. Cheers!

[cristianbote]

Awesome work @mpkelly! Thanks for opening the PR.

As for the .attrs api, there’s no equivalent in goober. I believe there should be a hard line between Styled components and regular ones and I feel strange about .attrs 😄 it’s like a pre-processor for your props but shouldn’t that functionality exist inside the functional components instead? I don’t know, I really think we should keep these things separated.

Anyway in goober the equivalent would be to have a InputStyled that handles the styling and the main Input component handling the type and size. Like so:

import { styled } from "goober";

const InputStyled = styled("input")`
  border-radius: 3px;
  border: 1px solid palevioletred;
  display: block;
  margin: 0 0 1em;
  padding: ${(props) => props.padding};

  ::placeholder {
    color: palevioletred;
  }
`;

const Input = ({ small, ...props }) => {
  return <InputStyled type="text" size={small ? 5 : undefined} {...props} />;
};

Running the above in here https://codesandbox.io/s/loving-gareth-n3vtx?file=/src/App.js:23-403