Package Exports

easy-css-transform-builder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (easy-css-transform-builder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

easy-css-transform-builder

Easily build CSS transform values with JavaScript.

Install

$ npm install easy-css-transform-builder

Usage

You can build transform values with a simple API.

import { createCSSTransformBuilder } from 'easy-css-transform-builder';

const builder = createCSSTransformBuilder({
  length: 'px',
  angle: 'deg',
});

const transform = builder({
  translateX: 30,
  scale: 2.8,
  rotate3d: [1, 0, 0, 60],
  skewY: '40rad',
});

console.log(transform);
// translateX(30px) scale(2.8) rotate3d(1, 0, 0, 60deg) skewY(40rad)

API

You can set the following properties.

CSS Properties

translateX: number | string
translateY: number | string
translateZ: number | string
translate: [number * 2] | string
translate3d: [number * 3] | string
scale: number | string
scale3d: [number * 3] | string
scaleX: number | string
scaleY: number | string
scaleZ: number | string
rotate: number | string
rotate3d: [number * 4] | string
rotateX: number | string
rotateY: number | string
rotateZ: number | string
skewX: number | string
skewY: number | string
perspective: number | string
matrix: [number * 6] | string
matrix3d: [number * 16] | string

Exports

import {
  createCSSTransformBuilder,
  properties,
} from 'easy-css-transform-builder';

`createCSSTransformBuilder(units: object)`

Create a Builder.

Example:

const builder = createCSSTransformBuilder({ length: 'em', angle: 'rad' });

builder({ translateY: 50 }); // translateY(50px)

`properties: string[]`

An array of supported property names.

console.log(properties);
// [
//   "translateX",
//   "translateY",
//   "translateZ",
//   ...
// ]

Example with React.js

Because it's a simple API, it can be used in various environments.

import React, { Component } from 'react';
import { createCSSTransformBuilder } from 'easy-css-transform-builder';

const builder = createCSSTransformBuilder();

class MyComponent extends Component {
  render() {
    return (
      <div style={{
        background: '#efefef',
        transform: builder({
          translateX: 100,
          translateY: -50,
          rotate: 180
        })
      }}>
        Easy build CSS transform values!!
      </div>
    );
  }
}

CHANGELOG

See the CHANGELOG.md

Contibute

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request 💪

Bugs, feature requests and comments are more than welcome in the issues.

Development

We will develop using the following npm scripts.

`npm run build`

Compile TypeScript and create type definitions.

`npm run test`

Run unit testing with Ava, And linting with TSLint.