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: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/micheleriva/mjn
• Owner: micheleriva
• License: mit
• Created: 2018-12-19T09:53:01.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T16:50:39.000Z (over 1 year ago)
• Last Synced: 2024-06-19T06:56:24.623Z (3 months ago)
• Topics: error-handling, exception-handling, javascript, js, lodash-get, objects, typescript, undefined-behavior, vanilla-js
• Language: TypeScript
• Homepage:
• Size: 6.42 MB
• Stars: 69
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  





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





  

    

  

  

    

  

  

    

  

  

  


  

     

  

  

    

  

  

    

  

  

    

  





  






# Sponsors



  

    

  


  


  

    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)