Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/micheleriva/mjn

⚡️Like loadash.get, but in ~200 bytes
https://github.com/micheleriva/mjn

error-handling exception-handling javascript js lodash-get objects typescript undefined-behavior vanilla-js

Last synced: 13 days ago
JSON representation

⚡️Like loadash.get, but in ~200 bytes

Awesome Lists containing this project

README

        




Simple utility to check if a key or a value exists in an object.



Build Status


Coverage


Maintainability

npm






Blazing Fast










# Sponsors



GraphCMS




Become a sponsor



> 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](#installation)
- [Usage](#usage)
- [Simple Example](#simple-example)
- [Real World React Example](#real-world-react-example)
- [Demos](#demos)
- [License](#license)

# Installation

**yarn**

```sh
yarn add mjn
```

**npm**

```sh
npm install --save mjn
```

**cdn**

```html

```

# Usage

### Simple Example

```js
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

```jsx
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 = () => (


Hello {maybe(user, "name.first_name")}!


{maybe(user, "contacts.email")}


{maybe(user, "contacts.phone.office", "You don't have an office phone.")}



);

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```

# Demos

### React.js

[![React Example](/docs/react.png)](https://codesandbox.io/s/l71m022x99)
[![Edit l71m022x99](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l71m022x99)

### Vue.js

[![Vue Example](/docs/vue.png)](https://codesandbox.io/s/6j7438n7rr?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue)
[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6j7438n7rr?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue)

### Vanilla JS

[![Vanilla JS](/docs/vanillajs.png)](https://codesandbox.io/s/30w08xl6wq?module=%2Fsrc%2Findex.js)
[![Vanilla JS](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30w08xl6wq?module=%2Fsrc%2Findex.js)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



Michele Riva

💻 💼

Paolo Roth

💻

Mattia Astorino

🎨

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

# License

[MIT](/LICENSE.md)