# use-up > React helper to setup multiple useful plugins in one setup. This is a part of the Up Toolkit. Latest version **1.1.6** (published 2022-08-08) · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install use-up pnpm add use-up yarn add use-up bun add use-up ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.1.6 | | Published | 2022-08-08 | | First published | 2021-10-17 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 570.3 KB | | Known vulnerabilities | 0 (+23 in 1 direct dependencies) | | Install scripts | no | | Maintainers | danielsum | ## Links - npm: https://www.npmjs.com/package/use-up - npm.io page: https://npm.io/package/use-up ## Dependencies (9) - [antd](https://npm.io/package/antd.md) ^4.16.13 - [axios](https://npm.io/package/axios.md) ^0.23.0 - [graphql](https://npm.io/package/graphql.md) ^15.6.1 - [axios-es6](https://npm.io/package/axios-es6.md) ^0.11.1 - [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.4.16 - [js-form-helper](https://npm.io/package/js-form-helper.md) ^1.2.3 - [@cherrypulp/i18n](https://npm.io/package/@cherrypulp/i18n.md) ^1.4.6 - [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.6.2 - [js-config-helper](https://npm.io/package/js-config-helper.md) ^1.1.0 ## Recent versions - 1.1.6 (latest) — 2022-08-08 - 1.1.5 — 2022-08-08 - 1.1.3 — 2022-05-16 - 1.1.2 — 2022-05-16 - 1.1.1 — 2022-05-16 - 1.1.0 — 2021-10-24 - 1.0.48 — 2021-10-24 - 1.0.47 — 2021-10-24 - 1.0.46 — 2021-10-22 - 1.0.45 — 2021-10-22 - 1.0.44 — 2021-10-22 - 1.0.43 — 2021-10-22 - 1.0.42 — 2021-10-22 - 1.0.41 — 2021-10-22 - 1.0.40 — 2021-10-22 - … 36 more at https://npm.io/package/use-up/versions ## README # Use Up ## 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 : - [React for the Javascript framework](https://reactjs.org/) - [Tailwind as a Front-End Utilities](https://tailwindcss.com/) - [DaisyUI a Tailwind components extension](https://daisyui.com/) - [AntDesign as Ui Library](https://ant.design/) - [Axios for the ajax request](https://axios-http.com/) - [I18n for the translations helpers](https://www.npmjs.com/package/@cherrypulp/i18n) - [JsConfigHelper for config provider](https://www.npmjs.com/package/js-config-helper) - [JsFormHelper as form helper](https://www.npmjs.com/package/js-form-helper) - [DayJS as date helper](https://day.js.org/) 🧐 : "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](https://en.wikipedia.org/wiki/Convention_over_configuration)" and [S.O.L.I.D principle](https://en.wikipedia.org/wiki/SOLID) :-). 😁 : "Ok now I want to start !!!" ## Getting started There is also a Next.js boilerplate available here : [https://github.com/uptoolkit/upfront-nextjs](https://github.com/uptoolkit/upfront-nextjs) In your React project just make : ````bash yarn add use-up #or npm i use-up --save ```` REM : for more tools to use => you can check out also up-react [https://github.com/uptoolkit/up-react](https://github.com/uptoolkit/up-react) Then in your main app (likely very soon in your app instanciation), do : ````javascript // 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} from 'use-up'; //1. You must instanciate the useUp singleton useUp({ debug: true, project : { name: 'Up Toolkit Demo', logo: { src: '/img/logo.svg', }, url: '/' }, storeMode: 'reactive', // could be reactive|redux api: { url: 'https://uptoolkit/demo/api', // Replace with your api endpoint }, translations: { en_EN: { hello: 'Hello World !', }, fr_FR: { hello: 'Bonjour le monde', }, }, locale: 'en_EN', locales: [ 'en_EN', 'fr_FR' ], }); ReactDOM.render( , document.getElementById('root') ) ```` Then in your component you can simply use the useUp() helper : ````javascript import {useState} from 'react' import {useUp} from 'use-up'; function App() { const { config, // config helper api, // api helper t, // translation helper } = useUp(); return (
{config.get('project.name')} {t('hello')}
) } ```` # Available variable helpers | Properties | Description | Link | |--------------|:-----------------------------------------------:|------:| | config | Config Helper | https://www.npmjs.com/package/js-config-helper | | http | Axios instance | https://axios-http.com/ | | api | Axios instance with your api as baseUrl | https://axios-http.com/ | | i18n | I18n Helper | https://www.npmjs.com/package/@cherrypulp/i18n | | 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 | | message | Message helper from AntDesign Ui | https://ant.design/components/message/ | | notification | Notification helper from AntDesign Ui | https://ant.design/components/notification/ | # 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 : `````javascript useUp({ override: { api: MyCustomApiService, message: MyOtherMessagePlugin }, exclude: [ 'notification', 'i18n' ] }); ````` ## Digging deeper You can get full documentation or check our complete example : - [https://uptoolkit.com](https://uptoolkit.com) - [https://github.com/uptoolkit/up-react/tree/main/example](https://github.com/uptoolkit/up-react/tree/main/example) ### Discover the whole ecosystem of Up Toolkit UseUp is a part of the Up Toolkit ecosystem a set of packages and utilities for change makers. For more information go to : - [https://uptoolkit.com](https://uptoolkit.com) # How to contribute ? Everyone can contribute and propose any components or post an issues, make a suggestion : - [https://github.com/uptoolkit/up-react/issues](https://github.com/uptoolkit/up-react/issues) - [You can also share your package in Awesome Up](https://github.com/uptoolkit) # To dos : - [x] Testing using Jest - [x] Add Apollo GraphQL Client helper - [x] Customising AntDesign style - [x] Documenting code - [x] Setting up Storybook - [x] More typehint and typescript - [x] Add more useful components and libs :-) Any helps wanted ! # Support us Support us on Open Collective or buy us a Tree : - [https://opencollective.com/uptoolkit](https://opencollective.com/uptoolkit) # License MIT # Treeware license This package is also a [Treeware](https://treeware.earth). If you use it in production, then we kindly ask [**buy the world a tree**](https://plant.treeware.earth/uptoolkit/use-up) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats! --- _Source: https://npm.io/package/use-up · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._