oleng-common-utils2

A shared React context module for managing and providing context values across your React application.

Installation

To install the package, run:

npm install oleng-common-utils2

Prerequisites

This module includes JSX code and requires your project to be set up to handle React and JSX syntax. Make sure your project has:

• Babel configured with React presets
• Webpack (or another bundler) configured to process JSX files

Example Babel Configuration

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Example Webpack Configuration

module.exports = {
  // ... other webpack configuration
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Usage

Importing the Provider

First, import the MyProvider and wrap your application with it:

import React from 'react';
import ReactDOM from 'react-dom';
import { MyProvider } from 'oleng-common-utils2';

const App = () => (
  <MyProvider>
    <YourComponent />
  </MyProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Consuming the Context

To consume the context values in your components, use the useContext hook:

import React, { useContext } from 'react';
import { MyContext } from 'oleng-common-utils2';

const YourComponent = () => {
  const { contextValue, setContextValue } = useContext(MyContext);

  return (
    <div>
      <p>Context Value: {contextValue}</p>
      <button onClick={() => setContextValue('New Value')}>Change Value</button>
    </div>
  );
};

export default YourComponent;

License

This project is licensed under the ISC License.