https://github.com/alfredosalzillo/react-pendulum

A React Context utility library.
https://github.com/alfredosalzillo/react-pendulum

multiprovider react treeshakable utility utility-library

Last synced: 2 months ago
JSON representation

A React Context utility library.

• Host: GitHub
• URL: https://github.com/alfredosalzillo/react-pendulum
• Owner: alfredosalzillo
• Created: 2020-11-14T18:24:41.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-08-13T12:24:14.000Z (almost 4 years ago)
• Last Synced: 2025-03-18T13:19:14.174Z (3 months ago)
• Topics: multiprovider, react, treeshakable, utility, utility-library
• Language: TypeScript
• Homepage:
• Size: 1.04 MB
• Stars: 21
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-pendulum

A [React Context](https://it.reactjs.org/docs/context.html) utility library.

[![NPM](https://img.shields.io/npm/v/react-pendulum.svg)](https://www.npmjs.com/package/react-pendulum) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![codecov](https://codecov.io/gh/alfredosalzillo/pendulum/branch/main/graph/badge.svg)](https://codecov.io/gh/alfredosalzillo/pendulum)

## Install

Using npm

```bash

npm install --save react-pendulum

```

Using yarn

```bash

yarn add react-pendulum

```

## Components

- [MultiProvider](#multiprovider)

### MultiProvider

A component to clean up the nasty code you get from taking advantage of [React Context](https://it.reactjs.org/docs/context.html) API.

Props

- `providers` the array of providers instances to wrap to the `children`

```tsx

import React, { Component, createContext } from 'react'

import { MultiProvider } from 'react-pendulum'

const FirstNameContext = createContext('John')

const LastNameContext = createContext('Doe')

const HelloWorld = () => {

  const firstName = useContext(FirstNameContext)

  const lastName = useContext(LastNameContext)

  return <>{`Hello ${firstName} ${lastName}`}>

}

class App extends Component {

  render() {

    return (

      ,

          

        ]}

      >

      

    

    )

  }

}

```

## Utilities

- [withContext](#withcontext)

### withContext

A high order function to create the `withContext` HOC for any `Context`.

Args:

- `Context` the context to assign the value

- `propsName` the props name to assign the value of `Context`

```tsx

import React, { Component, createContext } from 'react'

import { withContext } from 'react-pendulum'

const NameContext = createContext('John Doe')

const withName = withContext(NameContext, 'name');

const HelloWorld = withName(({ name }) => {

  return <>{`Hello ${name}`}>

})

```

## License

MIT © [](https://github.com/)