has-easing

Returns true if a string is a valid CSS timing function.

Example:

import hasEasing from 'has-easing';

hasEasing('linear'); // Returns true
hasEasing('ease-in-out'); // Returns true
hasEasing('spinfaster!'); // Returns false
hasEasing(); // Returns false
hasEasing('cubic-bezier(0.17,0.67,0.83,0.67'); // Returns true
hasEasing('cubic-bezier(999,1.67,23,-200'); // Returns false

Install

yarn add has-easing

Usage

This tool is useful to validate input for an animable component or an animation library that exposes CSS transitions in their API:

// Index.jsx
import Cube from 'cube';

<Cube animatable={'width'} time={'3s'} easing={'ease-in-out'} />;

// Cube.jsx
import hasEasing from 'has-easing';
// ... Somewhere in a render() method:
const { animatable, value, time, easing } = this.props;
// In this case, hasEasing is used to set a default easing on invalid input:
const easing = hasEasing(easing) ? 'ease-in-out' : easing;
const CSSTransition = `${animatable} ${time} ${easing}`;

Development Commands

$ npm test # run tests with Jest
$ npm run coverage # run tests with coverage and open it on browser
$ npm run lint # lint code
$ npm run docs # generate docs
$ npm run build # generate docs and transpile code
$ npm run watch # watch code changes and run scripts automatically
$ npm run patch # bump patch version and publish to npm e.g. 0.0.1
$ npm run minor # bump minor version and publish to npm e.g. 0.1.0
$ npm run major # bump major version and publish to npm e.g. 1.0.0

API

Table of Contents

• hasEasing

hasEasing

This function checks if an input is a valid transition timing function.

Parameters

• easing string String to check if it's a valid timing function.

Returns boolean Boolean of whether the timing function is valid.

License

MIT © Dave Barthly