docs done

Author: Mokshit06

docs/pages/docs/usage/hooks.mdx

@@ -1,10 +1,15 @@
+import Callout from 'nextra-theme-docs';
+
 # Using React Hooks
 
 Sveltris allows you to use React hooks inside your Svelte component by wrapping the call inside `use`.
 
 `use` returns a `readonly` svelte store that can be subscribed to by your component.
 
-The value of this store is `undefined` during the initial render, so it needs to be accessed inside an `#if` block.
+<Callout>
+  The value of this store is `undefined` during the initial render, so it needs
+  to be accessed inside an `#if` block.
+</Callout>
 
 ```html
 <script>
@@ -24,4 +29,4 @@ const counter = use(useState(0))
 
 ## Limitations
 
-It has some limitations, for eg. you can't use hooks that depend on a parent `ContextProvider` being there in the react root. But if the `ContextProvider` isn't stateful then it can be passed as the second argument of `use`
+It has some limitations, for eg. you can't use hooks that depend on a parent `ContextProvider` being there in the react root. But if the `ContextProvider` isn't stateful then it can be passed as the second argument of `use`

docs/pages/docs/usage/react-in-svelte.mdx

@@ -1,3 +1,5 @@
+import Callout from 'nextra-theme-docs';
+
 # React in Svelte
 
 With Sveltris, you can use any React component inside Svelte as if it was a regular Svelte component.
@@ -10,7 +12,18 @@ With Sveltris, you can use any React component inside Svelte as if it was a regu
 <Counter />
 ```
 
-Sveltris also maps all React and custom event handlers (`/on(.*)/`) to Svelte format, and you can set them using `/on:(.*)/` syntax.
+<Callout>
+The React component must be a default export for it to work. If it is not a default export, then you can create another `.js` file that re-exports the named export as a default export.
+
+```js
+export { Counter as default } from './Counter?in-svelte';
+```
+
+</Callout>
+
+## Props and Events
+
+Sveltris also accepts all props, and triggers a selective rerender whenever the props update. It also maps all React and custom event handlers (`/on(.*)/`) to Svelte format, and you can set them using `/on:(.*)/` syntax.
 So if a component has an `onSubmit` prop, you can set it as `on:submit`
 
 ```html
@@ -22,5 +35,3 @@ So if a component has an `onSubmit` prop, you can set it as `on:submit`
 
 <Input {value} on:change={v => value = v} />
 ```
-
-These components also _just work_ with SSR without any extra configuration required.

docs/pages/docs/usage/svelte-in-react.mdx

@@ -1 +1,40 @@
 # Svelte in React
+
+With Sveltris, you can use any Svelte component inside React as if it was a regular React component.
+
+```jsx
+import Counter from './Counter.svelte?in-react';
+
+<Counter />;
+```
+
+## Props and Events
+
+You can also pass `props` and events to this component, just like in a regular React component. Updates to them automatically triggers a rerender of the Svelte component.
+
+All svelte events such as `on:click` are mapped to camelCase like `onClick`.
+
+```jsx
+import Input from './Input.svelte?in-react';
+import { useState } from 'react'
+
+const [value, setValue] = useState("")
+
+<Input value={value} onChange={v => setValue(v)} />;
+```
+
+## Slots and children
+
+`children` passed to these components is set as the default slot of the underlying Svelte component
+
+```jsx
+import Layout from './Layout.svelte?in-react';
+
+<Layout>
+  <h1>Hello world</h1>
+</Layout>;
+```
+
+## SSR
+
+These components also _just work_ with SSR without any extra configuration required.