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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. 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.

License

MIT © tsuyoshiwada