To help you get started, we've collected the most common ways that tiny-invariant is being used within popular public projects.

atlassian / react-beautiful-dnd / src / view / draggable / check-own-props.js View on Github

export default (props: Props) => {
  // Number.isInteger will be provided by @babel/runtime-corejs2
  invariant(
    Number.isInteger(props.index),
    'Draggable requires an integer index prop',
  );
  invariant(props.draggableId, 'Draggable requires a draggableId');
  invariant(
    typeof props.isDragDisabled === 'boolean',
    'isDragDisabled must be a boolean',
  );
};

View more ways to use tiny-invariant

tiny-invariant 🔬💥

A tiny invariant alternative.

What is invariant?

An invariant function takes a value, and if the value is falsy then the invariant function will throw. If the value is truthy, then the function will not throw.

import invariant from 'tiny-invariant';

invariant(truthyValue, 'This should not throw!');

invariant(falsyValue, 'This will throw!');
// Error('Invariant violation: This will throw!');

You can also provide a function to generate your message, for when your message is expensive to create

import invariant from 'tiny-invariant';

invariant(value, () => getExpensiveMessage());

Why tiny-invariant?

The library: invariant supports passing in arguments to the invariant function in a sprintf style (condition, format, a, b, c, d, e, f). It has internal logic to execute the sprintf substitutions. The sprintf logic is not removed in production builds. tiny-invariant has dropped all of the sprintf logic. tiny-invariant allows you to pass a single string message. With template literals there is really no need for a custom message formatter to be built into the library. If you need a multi part message you can just do this:

invariant(condition, `Hello, ${name} - how are you today?`);

Type narrowing

tiny-invariant is useful for correctly narrowing types for flow and typescript

const value: Person | null = { name: 'Alex' }; // type of value == 'Person | null'
invariant(value, 'Expected value to be a person');
// type of value has been narrowed to 'Person'

API: (condition: any, message?: string | (() => string)) => void

• condition is required and can be anything
• message optional string or a function that returns a string (() => string)

Installation

# yarn
yarn add tiny-invariant

# npm
npm install tiny-invariant --save

Dropping your message for kb savings!

Big idea: you will want your compiler to convert this code:

invariant(condition, 'My cool message that takes up a lot of kbs');

Into this:

if (!condition) {
  if ('production' !== process.env.NODE_ENV) {
    invariant(false, 'My cool message that takes up a lot of kbs');
  } else {
    invariant(false);
  }
}

• Babel: recommend babel-plugin-dev-expression
• TypeScript: recommend tsdx (or you can run babel-plugin-dev-expression after TypeScript compiling)

Your bundler can then drop the code in the "production" !== process.env.NODE_ENV block for your production builds to end up with this:

if (!condition) {
  invariant(false);
}

• rollup: use rollup-plugin-replace and set NODE_ENV to production and then rollup will treeshake out the unused code
• Webpack: instructions

Builds

• We have a es (EcmaScript module) build
• We have a cjs (CommonJS) build
• We have a umd (Universal module definition) build in case you needed it

We expect process.env.NODE_ENV to be available at module compilation. We cache this value

That's it!

🤘