Comments (2)
The idea of this library is that your users are choosing the right adapter and you are using it according the public interface we have. I will think how to improve readme but the idea is simple –
- you are exposing date-io adapters to your users
- user chooses one of available and giving you this interface
- you are using it according to documented interface because you know that all of them producing equal results
Basically this example is for your user
import { createMyAdapter } from "your-awesome-lib/adapters/date-fns";
<DateLibProvider adapter={createMyAdapter({ locale: "fr" })}>{/* ... */}</DateLibProvider>;
And this is your usage:
import { IUtils } from "@date-io/core/IUtils";
function myFunctionInLibrary<TDate>(date: TDate, adapter: IUtils<TDate>) {
// ...
const weekArray = adapter.getWeekArray(Date);
// ...
}
from date-io.
I agree that the README is confusing - not everyone uses React or tsx, so the examples are not clear.
Here is what I pieced together for a clearer example:
Create your own library:
// my-awesome-lib
// Choose which adapters library will support, and re-export them
export { default as dateFnsAdapter } from '@date-io/date-fns';
export { default as dayJsAdapter } from '@date-io/dayjs';
export { default as luxonAdapter } from '@date-io/luxon';
// Export new library code
export default class AwesomeLib {
MyAdapter; // Will be one of the adapters above, which all have common interface
// Adapter will be supplied by user of my-awesome-lib
constructor(adapter) {
this.MyAdapter = adapter;
}
function add5DaysAndFormat(theDate) {
// Perform the following actions using the common adapter interface:
// - Create a new date instance
// - Manipulate the date (add 5 days)
// - Format the date (using one of the preset formats)
const myDate = this.MyAdapter.date(theDate);
const myDatePlus5 = this.MyAdapter.addDays(myDate, 5);
const formattedResult = this.MyAdapter.format(myDatePlus5, 'fullDate');
// Return the resulting string
return formattedResult;
}
}
Others use your library with whatever they choose - for example, dayjs:
// someone-using-my-awesome-lib
import dayjs from 'dayjs';
// They import your library, and the adapter that matches their own date library
import AwesomeLib, { dayJsAdapter } from 'my-awesome-lib';
const awesomeInstance = new AwesomeLib(new dayJsAdapter());
// They can use your library via the adapter they chose
const tomorrow = dayjs().add(1, 'day').toDate(); // JS Date via dayjs - eg. Sat Oct 22 2022 13:31:50 GMT-600
const tomorrowPlus5 = awesomeInstance.add5DaysAndFormat(tomorrow); // String via your lib - Oct 27, 2022
Or date-fns:
// someone-using-my-awesome-lib
import { addDays } from 'date-fns';
// They import your library, and the adapter that matches their own date library
import AwesomeLib, { dateFnsAdapter } from 'my-awesome-lib';
const awesomeInstance = new AwesomeLib(new dateFnsAdapter());
// They can use your library via the adapter they chose
const tomorrow = addDays(new Date(), 1); // JS Date via date-fns - eg. Sat Oct 22 2022 13:31:50 GMT-600
const tomorrowPlus5 = awesomeInstance.add5DaysAndFormat(tomorrow); // String via your lib - Oct 27, 2022
from date-io.
Related Issues (20)
- Tree shaking
- Throw error for wrong locale type
- not working with @material-ui/pickers HOT 1
- Refactor arrow-methods from LuxonUtils HOT 2
- Module not found: Can't resolve 'date-fns-jalali/addSeconds' HOT 2
- Uncaught Error: Cannot find module 'date-fns/addDays' HOT 1
- Usage of the `date-io` adapters on MUI packages HOT 7
- Improving js-joda support
- Support luxon 3.0.* HOT 1
- Why typescript is in deps, not dev deps? HOT 2
- Expose "getWeek(date)" method to obtain ISO week number
- [Feature Request] add `isAfterMonth` and `isBeforeMonth` HOT 2
- help to install HOT 2
- Optimize `date` method's type annotation.
- TS Error Can't find module @date-io/dayjs
- Support for date-fns 3 HOT 3
- Attempted import error: 'addDays' is not exported from 'date-fns/addDays HOT 1
- Inconsistency in getMonth and setMonth Methods HOT 2
- generic add/subtract methods?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from date-io.