Our open-source in Hacktoberfest 2020
Tags: hacktoberfest, react, opensource
Published: 2020-10-05 15:19:19

Our [team](https://github.com/lessmess-dev) actively supports open-source movement, but unfortunately, sometimes **we don't have** enough time for implementing new features in our OSS. So, initiatives like Hacktoberfest could be really helpful for us. In this article, I will show up the most notable issues.

# React Figma

[react-figma](https://github.com/react-figma/react-figma) is our flagship open-source project, this is a React renderer into Figma. The project has already participated in Hacktoberfest last year and got new contributors. There is a [contribution guide](https://github.com/react-figma/react-figma/blob/master/contributing.md) that could be helpful for newcomers.

### Text, Colors etc. Styles supporting

Figma [Styles](https://help.figma.com/hc/en-us/articles/360038746534) feature is a really helpful. We actively use in our projects:

![https://dev-to-uploads.s3.amazonaws.com/i/wig93m9o7zcxsr2ik5fv.png](https://dev-to-uploads.s3.amazonaws.com/i/wig93m9o7zcxsr2ik5fv.png)

Test Styles select

Figma has [API](https://www.figma.com/plugin-docs/api/figma/#styles) for creating styles, but React Figma hasn’t support it. Of course, it’s possible to write something like this:

```jsx
const style = figma.createTextStyle();
style.fontName = "Roboto";
style.fontSize = 16;
...
<Text textStyleId={style.id} />
...
```

but this code is not compatible with react-native API and text styles will be re-created if the plugin relaunches.

{% github https://github.com/react-figma/react-figma/issues/345 %}

{% github https://github.com/react-figma/react-figma/issues/344 %}

### React Native APIs supporting

React Native compatibility is the one of the most useful features of react-figma. But we haven't implemented all RN APIs yet. 
E.g

- [AppRegistry](https://reactnative.dev/docs/appregistry)
- [AppState](https://reactnative.dev/docs/appstate.html)
- [Appearance](https://reactnative.dev/docs/appearance)
- [Clipboard](https://reactnative.dev/docs/clipboard)
- [Dimensions](https://reactnative.dev/docs/dimensions)

There are issues about it:

{% github https://github.com/react-figma/react-figma/issues/322 %}

{% github https://github.com/react-figma/react-figma/issues/321 %}

### Implementing Error Boundaries or RedBox

React supporst [Error Boundaries](https://reactjs.org/docs/error-boundaries.html) components to allow debugging purposes. But React Figma  doesn't have this out-of-the-box support:

{% github https://github.com/react-figma/react-figma/issues/83 %}

# react-fetch-hook

[react-fetch-hook](https://github.com/ilyalesik/react-fetch-hook) is a React hook to  use Fetch AP convenientlyI. There are some unclosed issues:

{% github https://github.com/ilyalesik/react-fetch-hook/issues/25 %}

{% github https://github.com/ilyalesik/react-fetch-hook/issues/24 %}

{% github https://github.com/ilyalesik/react-fetch-hook/issues/29 %}

# react-media-hook

[react-media-hook](https://github.com/lessmess-dev/react-media-hook) is a React Hook for Media Queries.

### Helpers for creating queries

Helpers for creating queries could be a very useful feature. E.g. instead of

```js
const isDark = useMediaPredicate("(prefers-color-scheme: dark)");
```

will be much better something like this:

```js
const isDark = useDark();
```

{% github https://github.com/lessmess-dev/react-media-hook/issues/13 %}

# Others

Many other repos are looking for your contributions:

{% github https://github.com/lessmess-dev/touch-emoji %}

{% github https://github.com/lessmess-dev/gen-flow-files %}

{% github https://github.com/effector/awesome %}

{% github https://github.com/ilyalesik/awesome-figma %}

# Conclusion

We think Hactoberfest is a great initiative, but it doesn't support [spam PRs for t-short](https://twitter.com/shitoberfest). Do you know awesome repositories that looking for contributors? Propose them in the comments! 🙌

Happy coding!

# Thanks

* [Anna Egorova](https://anna.ae/) - editing

# Links

- [awesome-hacktoberfest-2020](https://github.com/OtacilioN/awesome-hacktoberfest-2020)
- [Happy Hacktoberfest! 🎃](https://dev.to/devteam/happy-hacktoberfest-here-s-how-to-show-up-for-open-source-this-month-4cee)
- [Beginners Guide to Hacktoberfest](https://dev.to/tcgronk/beginners-guide-to-hacktoberfest-3m0m)
- [Hacktoberfest 2020 — Who’s looking for contributors?](https://dev.to/devteam/whos-looking-for-collaborators-hacktoberfest-2020-jl89)
- [Hacktoberfest website](https://hacktoberfest.digitalocean.com/)
- [Hacktoberfest twitter](https://twitter.com/hacktoberfest)