Carrot-js - Like Redux without the boilerplate

• No more props! - Store and retrieve variables from any React file without passing down props
• Reactive variables! - Listen for changes to instantly update your state (or activate your callback)
• Easy peasy carrot squeezy! - Just import carrot-js in any file and you're ready to go

 

Example

Install Carrot-js using your terminal:

1npm install carrot-js

Import Carrot-js in your root-component (usually App.js) and wrap all your components:

1import { Carrot, pantry } from 'carrot-js';
2
3function  App() {
4  return (
5    <>
6      <Carrot value={pantry}>
7        <Navbar />
8        <Dashboard />
9      </Carrot>
10    <>
11  );
12}

Set variable

'Plant' a variable from any file (eg. an API response). Your plant method takes 2 arguments:

• Variable name
• Data to be stored in variable

1import { plant } from 'carrot-js';
2
3plant('exampleVariable', 'Crops are good this year!');

Get variable ( and listen for any future variable changes)

The 'pick' method will get your variable and start listening for any changes to it. It takes two arguments:

• Variable name
• Callback function (eg. setVariable, myFunction, (data) => { console.log(data) } etc.)

Every time the variable changes, 'pick' will execute your callback function. The component below will print 'Crops are good this year!':

1import { useEffect, useState } from 'react';
2import { pick } from 'carrot-js';
3
4function MyComponent () {
5  const [variable, setVariable] = useState('');
6
7  useEffect( () => {
8    pick('exampleVariable', setVariable);
9  }, []);
10
11  return (
12    <>
13      <h4>{variable}</h4>
14    <>
15  );
16}

Licence

MIT