No cannot get property x of undefined. Just returns void 0 (undefined) if a value or a key does not exist. Highly inspired from Java's Optional Type.

Index

• Installation
• Usage
  • Simple Example
  • Real World React Example
• Demos
• License

Installation

yarn

yarn add mjn

npm

npm install --save mjn

cdn

<script src="https://cdn.jsdelivr.net/npm/mjn@latest/dist/dist.min.js"></script>

Usage

Simple Example

import maybe from "mjn"; // Or import the library as you wish using npm or CDN script tag!

const myObject = {
  user: {
    name: "John",
    surname: "Doe",
    birthday: "1995-01-29",
    contacts: {
      email: "[email protected]",
      phone: "000 0000000"
    },
    languages: ["english", "italian"]
  }
};

const a = maybe(myObject, "user.name");
const b = maybe(myObject, "user.languages[1]");
const c = maybe(myObject, "foo.bar.baz");
const d = maybe(myObject, "foo.bar.baz", "no value!");
const e = maybe(myObject, "foo.bar.baz", () => "I can be a function!");


console.log(a); // => John
console.log(b); // => italian
console.log(c); // => won't log anything!
console.log(d); // => "no value!"
console.log(e); // => "I can be a function!"

Real World React Example

import React from "react";
import ReactDOM from "react-dom";
import maybe from "mjn";

const user = {
  name: {
    first_name: "John",
    last_name: "Doe"
  },
  contacts: {
    phone: "+00 000 0000000",
    email: "[email protected]"
  }
};

const App = () => (
  <div className="App">
    <h1>Hello {maybe(user, "name.first_name")}!</h1>
    <h2> {maybe(user, "contacts.email")} </h2>

    <p>
      {maybe(user, "contacts.phone.office", "You don't have an office phone.")}
    </p>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Demos

React.js

Vue.js

Vanilla JS

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT