Socket
Socket
Sign inDemoInstall

css-to-react-native

Package Overview
Dependencies
3
Maintainers
3
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-to-react-native

Convert CSS text to a React Native stylesheet object


Version published
Maintainers
3
Weekly downloads
5,148,722
decreased by-15.71%

Weekly downloads

Package description

What is css-to-react-native?

The css-to-react-native package allows developers to convert CSS text to a JavaScript object that matches the style format expected by React Native components. This is particularly useful for leveraging existing CSS code within React Native projects, enabling a more seamless integration of web styles into mobile development.

What are css-to-react-native's main functionalities?

Convert simple CSS strings

This feature allows the conversion of simple CSS strings into a format that can be directly used in React Native's style prop. The example demonstrates converting width and height properties from CSS to a React Native style object.

import { transform } from 'css-to-react-native';
const styles = transform('width: 100%; height: 100%;');

Support for shorthand properties

css-to-react-native can parse and split CSS shorthand properties into their respective longhand properties, making it easier to work with complex styling in React Native. The example shows how margin and padding shorthands are converted.

import { transform } from 'css-to-react-native';
const styles = transform('margin: 10px 20px; padding: 5px;');

Handling of custom properties

While React Native does not support CSS custom properties (variables) directly, css-to-react-native can process them when they are defined and used within the same CSS string. This feature is useful for maintaining consistency in color schemes or other values.

import { transform } from 'css-to-react-native';
const styles = transform('--custom-color: #333; color: var(--custom-color);');

Other packages similar to css-to-react-native

Readme

Source

css-to-react-native

Converts CSS text to a React Native stylesheet object.

Try it here

font-size: 18px;
line-height: 24px;
color: red;
{
  fontSize: 18,
  lineHeight: 24,
  color: 'red',
}

Converts all number-like values to numbers, and string-like to strings.

Automatically converts indirect values to their React Native equivalents.

text-shadow-offset: 10px 5px;
font-variant: small-caps;
transform: translate(10px, 5px) scale(5);
{
  textShadowOffset: { width: 10, height: 5 },
  fontVariant: ['small-caps'],
  // Fixes backwards transform order
  transform: [
    { translateY: 5 },
    { translateX: 10 },
    { scale: 5 },
  ]
}

Also allows shorthand values.

font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;
{
  fontFamily: 'Helvetica',
  fontSize: 14,
  fontWeight: 'bold',
  fontStyle: 'normal',
  fontVariant: [],
  lineHeight: 16,
  marginTop: 5,
  marginRight: 7,
  marginBottom: 2,
  marginLeft: 7,
}

Shorthands will only accept values that are supported in React, so background will only accept a colour, backgroundColor

There is also support for the box-shadow shorthand, and this converts into shadow- properties. Note that these only work on iOS.

Shorthand Notes

border{Top,Right,Bottom,Left} shorthands are not supported, because borderStyle cannot be applied to individual border sides.

API

The API is mostly for implementors. However, the main API may be useful for non-implementors. The main API is an array of [property, value] tuples.

import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;

transform([
  ['font', 'bold 14px/16px "Helvetica"'],
  ['margin', '5px 7px 2px'],
  ['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }

We don't provide a way to get these style tuples in this library, so you'll need to do that yourself. I expect most people will use postCSS or another CSS parser. You should try avoid getting these with string.split, as that has a lot of edge cases (colons and semi-colons appearing in comments etc.)

For implementors, there is also a few extra APIs available.

These are for specific use-cases, and most people should just be using the API above.

import { getPropertyName, getStylesForProperty } from 'css-to-react-native';

getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }

Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to transform.

transform([['border-radius', '50px']], ['borderRadius']);
// { borderRadius: 50 } rather than { borderTopLeft: ... }

This can also be done by passing a third argument, false to getStylesForProperty.

License

Licensed under the MIT License, Copyright © 2019 Krister Kari, Jacob Parker, and Maximilian Stoiber.

See LICENSE.md for more information.

Keywords

FAQs

Last updated on 14 Feb 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc