18.1.14 • Published 9 months ago

up-react v18.1.14

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

Up React

Latest Version on NPM npm Software License

Why ?

🥸 : Bootstrapping a project is unexpectedly very difficult because there are so many choices, too many setups and configs to do before just working on a project...

😩 : "Hell yeah, you're right. Javascript fatigue..."

🥸 : Up React help you to have everything you need to start for creating a webapp as simple as that :

🧐 : "Mmh, interesting..."

🥸 : At the best, you can just use our components or layouts making a breeze for your quick prototyping or web development with everything to start included and UP to date.

🧐 : "Mmh, yes but what if I want to..."

🥸 : Shut ! I know your dev syndrom... At the minimum, you will have a good boilerplate and UP to you to override it when you will feel the need. Thanks to our "convention over configuration philosophy" and S.O.L.I.D principle :-).

😁 : "Ok now I want to start !!!"

Getting started

There is also a Next.js boilerplate available here : https://github.com/uptoolkit/upfront-nextjs

In your React project just make :

yarn add up-react #or npm i up-react --save

Then in your main app (likely very soon in your instanciation), do :

// this will be likely in your main.js or pages/__app.js in Next
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import {useUp, setUp, UpProvider} from 'up-react';

//1. You must instanciate the setUp method in your react bootstrap code
const upConfig = {
  debug: true,
  project: {
    name: 'Up Toolkit Demo',
    logo: {
      src: '/img/logo.svg',
    },
    url: '/'
  },
  graphql: {
    url: "https://api.mocki.io/v2/c4d7a195/graphql"
  },
  storeMode: 'reactive', // could be reactive|redux
  store: store, // if defined you can define a Store that you can reuse in your useUp
  api: {
    url: 'https://uptoolkit/demo/api', // Replace with your api endpoint
  },
  i18n: {
    lng: "en_EN",
    supportedLngs: ['en_EN', 'fr_FR'],
    resources: {
      en_EN: {
        translation: {
          hello: 'Hello World !',
        }
      },
      fr_FR: {
        translation: {
          hello: 'Allo la terre !',
        }
      },
    }
  },
};

ReactDOM.render(
    <UpProvider options={upConfig}>
      <App/>
    </UpProvider>,
  document.getElementById('root')
)

Then in your component you can simply use the useUp() helper :

import {useState} from 'react'
import {useUp} from 'up-react';

function App() {

  const {
    config, // config helper
    api, // api helper
    t, // translation helper
  } = useUp();

  // Up Provider will automatically instanciate a graphqlClient
  const {data, loading} = useQuery(gql`query Test{
        todos {
            id
            description
        }
    }`);

  return (
    <div className="App">
      <header className="App-header">
        <h1>{config.get('project.name')}</h1>
        <p>{t('hello')}</p>
        <Skeleton loading={loading}>
          {data && <ul>
            {data.todos.map((t, k) => <li key={k}>{t.description}</li>)}
          </ul>}
        </Skeleton>
      </header>
    </div>
  )
}

Available variable helpers

PropertiesDescriptionLink
configConfig Helperhttps://www.npmjs.com/package/js-config-helper
httpAxios instancehttps://axios-http.com/
graphqlGraphQl Clienthttps://www.apollographql.com/docs/react/
apiAxios instance with your api as baseUrlhttps://axios-http.com/
i18nNext React I18nhttps://react.i18next.com/
formForm validation helperhttps://www.npmjs.com/package/js-form-helper
formApiForm validation helper with your Api as baseUrlhttps://www.npmjs.com/package/js-form-helper

What if I need to adapt or don't need a components ?

UseUp use a convention over configuration principle but also a S.O.L.I.D design pattern.

It means that you can override everything if you follow the Typed interface conventions.

To override an element in your initialisation config, just do :

index({
  override: {
    api: MyCustomApiService,
    message: MyOtherMessagePlugin
  },
  exclude: [
    'notification',
    'i18n'
  ]
});

Digging deeper

You can get full documentation or check our complete example :

Discover the whole ecosystem of Up Toolkit

Up Vue is a part of the Up Toolkit ecosystem a set of packages and utilities for changemakers.

For more information go to :

How to contribute ?

Everyone can contribute and propose any components or post an issues, make a suggestion :

To dos :

  • Testing using Jest
  • Help wanted to update package
  • v Documenting code
  • v Setting up Storybook
  • v More typehint and typescript
  • Add more useful components and libs :-)

Any helps wanted !

Support us

Support us on Open Collective or buy us a Tree :

License

MIT

Treeware license

This package is also a Treeware.

If you use it in production, then we kindly ask buy the world a tree to thank us for our work.

By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

18.1.9

9 months ago

18.1.8

9 months ago

18.1.7

9 months ago

18.1.6

9 months ago

18.1.5

9 months ago

18.1.4

9 months ago

18.1.3

9 months ago

18.1.2

9 months ago

18.1.1

9 months ago

18.1.0

9 months ago

18.1.11

9 months ago

18.1.14

9 months ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.6

1 year ago

2.0.1

1 year ago

1.2.0

2 years ago

1.3.0

2 years ago

1.1.0

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago