Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hope this helps. #38

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Hope this helps. #38

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions posts/2016-05-02-tool--for-converting-css-to-react-inline-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
layout: post
title: "Tool for Converting CSS to React Inline Styles!"
excerpt_separator: <!--more-->
author: Jason Jarrett
author_url: http://staxmanade.com
date: 2016-05-02 17:00
published: true
categories: react, styles
---

A simple little tool that helps translate plain CSS into the React in-line style specific JSON representation. Making it easy to copy and paste into an inline React component.

<!--more-->

<a target="blank" href="http://staxmanade.com/CssToReact/">
<img align="right" src="http://staxmanade.com/CssToReact/images/CssToReact-logo.svg">
</a>

### TL;DR

A simple little tool that helps translate plain CSS into the React in-line style specific JSON representation. Making it easy to copy and paste into an inline React component.

Click [here](http://staxmanade.com/CssToReact/) or the logo to jump the tool...

## The More Info Stuff

So you're working on a React app. It's up and running in you're favorite browser but you notice an issue with some layout. You think, ok, this should be easy to fix. You open up the developer tools, hack on some CSS within the browser till you get it looking just the way you want it to. Maybe it's several CSS properties you added or tweaked so you copy each of them into the clipboard so you can transfer them back to your application.

Then you realize, these styles aren't coming from a CSS style sheet, they're in-line styles right in you're React component.

Now you're like, FINE, I'll manually translate this to React-style-inline-CSS. This is no biggie if you do it once in a while. Except that time when you missed removing a dash or mis-cased a letter or maybe you forgot a JSON comma, or left a CSS semicolon. Never happened to you? Oh, you are so amazing if only I was as super cool as you. For myself and probably another 1 or 2 of you out there these problems do come up, but don't have to.

I hacked together a [little tool](http://staxmanade.com/CssToReact/) that automates this translation. Allows you to paste you're `CSS` into a `textarea`, it translates to React inline style JSON CSS and you can copy it out while avoiding translation bugs.

You can see the project here: [CssToReact](http://staxmanade.com/CssToReact/)

If you have a suggestion or want to pull-request it your self you can check it out here: [Source to Project](https://github.com/staxmanade/CssToReact)


This was originally published at [staxmanade.com/2016/04/easily-convert-css-to-react-inline-styles/](http://staxmanade.com/2016/04/easily-convert-css-to-react-inline-styles/)