🥸 : 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 :
- React for the Javascript framework
- Axios for the ajax request
- Next I18n for the translations helpers
- JsConfigHelper for config provider
- JsFormHelper as form helper
🧐 : "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 !!!"
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 --saveThen 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>
)
}| Properties | Description | Link |
|---|---|---|
| config | Config Helper | https://www.npmjs.com/package/js-config-helper |
| http | Axios instance | https://axios-http.com/ |
| graphql | GraphQl Client | https://www.apollographql.com/docs/react/ |
| api | Axios instance with your api as baseUrl | https://axios-http.com/ |
| i18n | Next React I18n | https://react.i18next.com/ |
| form | Form validation helper | https://www.npmjs.com/package/js-form-helper |
| formApi | Form validation helper with your Api as baseUrl | https://www.npmjs.com/package/js-form-helper |
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'
]
});You can get full documentation or check our complete example :
Up Vue is a part of the Up Toolkit ecosystem a set of packages and utilities for changemakers.
For more information go to :
Everyone can contribute and propose any components or post an issues, make a suggestion :
- 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 on Open Collective or buy us a Tree :
MIT
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.