#Best practice of signals among components?
4 messages · Page 1 of 1 (latest)
I am not sure how importing works but I know that the best ways I have found to share signals around is passing through props or context. This is easiest with parent child components where the parent holds the signal and passes it into the child. If you need two sibling components to both have access to a signal you can hold the signal in the parent or and pass to both in props or you can have the signal provided through a context so that you don't have to worry about manually passing a bunch of props around
// child component
export const Counter: Component<{value: number, setValue: Setter<number> }> = (props) => (
<div>
<button onClick={() => props.setValue((prev) => prev - 1)}>-</button>
<span>{props.value()}</span>
<button onClick={() => props.setValue((prev) => prev + 1)}>+</button>
</div>
)
// parent component
export const App = () => {
const [value, setValue] = createsSignal();
return <Counter value={value()} onValueChange={setValue} />
};
Quickly discover what the solid compiler will generate from your JSX template