Comments (8)
Additionally, it would be great to pass generics to the Provider (current types don't like it). Here's a trivial codesandbox showing the issue.
import constate from "constate";
type UseGenericProps<G> = {
custom: G;
};
export function useGenericExample<Generic extends string>({
custom
}: UseGenericProps<Generic>) {
return custom;
}
export const [GenericProvider, useGeneric] = constate(
// TS Error 1
useGenericExample
);
function Consumer() {
// type is `unknown`
const value = useGeneric();
return <>{value}</>;
}
export default function App() {
return (
<GenericProvider<
// TS error 2
"type-argument"
> custom="type-argument">
<Consumer />
</GenericProvider>
);
}
TS Error 1;
function useGenericExample<Generic extends string>({ custom }: UseGenericProps<Generic>): Generic
Argument of type '<Generic extends string>({ custom }: UseGenericProps<Generic>) => Generic' is not assignable to parameter of type '(props: unknown) => string'.
Types of parameters '__0' and 'props' are incompatible.
Type 'unknown' is not assignable to type 'UseGenericProps<string>'. ts(2345)
TS Error 2;
Expected 0 type arguments, but got 1.ts(2558)
from constate.
Got it! Thanks!
I don't know if that's possible. But if you know how to implement that, I would accept a PR.
Right now, the only solution I can think of is casting the function in your app:
const [ListProvider, _useList] = constate(useListContext);
export const useList = _useList as <T>() => T[];
from constate.
Great, I will check how this cast implementation works here.
And I will try to find some way to open a PR, i really like this lib.
Thank you for your attention!
from constate.
I don't understand what you mean. Could you elaborate?
from constate.
Sure, is something like this:
// page_component.ts
type TOrders = {
foo: string,
bar: boolean
}
const list = useList<TOrders[]>()
typeof list.data === TOrders[]
// hook_component.ts
function useListContext<T>() {
const [data, setData] = useState(T[])
// ommited
return {
data,
feedData,
}
}
export const [
ListProvider,
useList,
] = constate(useListContext)
Today, constate doesn't accept this.
Is it better now?
from constate.
Is this possible by change these:
function createUseContext(context: React.Context<any>): any {
return () => {
const value = React.useContext(context);
if (isDev && value === NO_PROVIDER) {
// eslint-disable-next-line no-console
console.warn("[constate] Component not wrapped within a Provider.");
}
return value;
};
}
// ...
function constate<P, V, S extends Array<SplitValueFunction<V>>>(
useValue: (props: P) => V,
...splitValues: S
): ContextHookReturn<P, V, S> {
const Context = React.createContext(NO_PROVIDER as V);
// ...
const useContext: any = () => {
if (isDev) {
// eslint-disable-next-line no-console
console.warn(
"[constate] Using the return value of constate as a hook is deprecated. " +
"Please, use the tuple format instead. " +
"See instructions on https://github.com/diegohaz/constate/pull/101"
);
}
return createUseContext(Context)();
};
// ...
}
to:
function createUseContext(context: React.Context<T>): T {
return () => {
const value = React.useContext(context);
if (isDev && value === NO_PROVIDER) {
// eslint-disable-next-line no-console
console.warn("[constate] Component not wrapped within a Provider.");
}
return value;
};
}
// ...
function constate<P, V, S extends Array<SplitValueFunction<V>>>(
useValue: (props: P) => V,
...splitValues: S
): ContextHookReturn<P, V, S> {
const Context = React.createContext(NO_PROVIDER as V); // as React.Context<V>
// ...
const useContext: V = () => {
if (isDev) {
// eslint-disable-next-line no-console
console.warn(
"[constate] Using the return value of constate as a hook is deprecated. " +
"Please, use the tuple format instead. " +
"See instructions on https://github.com/diegohaz/constate/pull/101"
);
}
return createUseContext(Context)();
};
// ...
}
I am sorry that I am unable to create a real patch right now.
from constate.
Related Issues (20)
- Possible to do lazy splitting at time of hook usage? HOT 4
- Limit to the number of split values? HOT 2
- Splitting ContextProvider definition from context value using part HOT 6
- Simple Package HOT 2
- Better Typescript types HOT 5
- Allow to invoke useCounter hook with arguments HOT 2
- Is it possible to have a ref to the Provider? HOT 5
- Demo for Complex Set State HOT 2
- How can i use overloading with constate? HOT 5
- How to pass props between nested providers HOT 1
- Mock initial state
- Types are not inferred properly HOT 6
- React Fast Refresh doesn't work on Constate side HOT 5
- Clarify that hooks are available in selector function HOT 4
- How to create selectors in order to listen on multiple changes in context's state? HOT 2
- When the selector returns an object, all components are re-rendered. HOT 2
- Migrate to GitHub actions
- How to access underling React.Context
- does constate support nested dynamic providers? HOT 1
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 constate.